<template>
  <!-- 个人中心 -->

  <div class="box">
    <heads ref="heads"></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="29"></ceList>
      <div class="bang-club">
        <!-- 等级规则 -->
        <div class="flex" style="justify-content: flex-end">
          <div
            class="rule pointer"
            @click="showRule = true"
            v-show="!showDetailsBox"
          >
            等级规则
          </div>
        </div>
        <!-- 轮播 -->
        <div v-show="!showDetailsBox">
          <div class="swiper-container">
            <div class="button-prev flex al-center ju-center pointer">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="button-next flex al-center ju-center pointer">
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(item, i) in vipData"
                :key="i"
                :style="[
                  { hight: hight ? hight : '150px' },
                  { backgroundImage: 'url(' + levelList[i].bgm + ')' },
                ]"
              >
                <!-- content -->
                <!-- <div> -->
                <div class="item-level flex">
                  <div class="img flex">
                    <img :src="levelList[i].img" mode />
                    <span :style="textOpacity" style="color: #fff">{{
                      item.title
                    }}</span>
                  </div>

                  <div class="cur-level flex">
                    <!-- <div class="cur-level flex"> -->
                    <span
                      class="cur-title"
                      :style="{ color: colors[i].wordColor }"
                      v-if="
                        vipInfo.integral * 1 < item.inteOver * 1 &&
                        vipInfo.integral * 1 > item.inteStart * 1
                      "
                      >当前等级</span
                    >
                    <span
                      class="cur-title"
                      :style="{ color: colors[i].wordColor }"
                      v-else-if="vipInfo.integral * 1 > item.inteOver * 1"
                      >已获得</span
                    >
                    <span
                      class="cur-title"
                      :style="{ color: colors[i].wordColor }"
                      v-else
                      >待升级</span
                    >
                    <div
                      class="right-box"
                      :style="{
                        '--bstate': colors[i].lineColor,
                        '--state': colors[i].bgColor,
                        backgroundColor: colors[i].bgColor,
                        borderColor: colors[i].lineColor,
                      }"
                    >
                      <span
                        :style="{
                          color: 'white',
                          left:
                            titleReplace(item.title).length > 2
                              ? '2px'
                              : '12px',
                        }"
                        >{{ titleReplace(item.title) }}</span
                      >
                    </div>
                  </div>
                </div>
                <div class="level-progress">
                  <el-progress
                    :show-text="false"
                    :stroke-width="12"
                    :color="colors[i].lineColor"
                    :percentage="psg[i]"
                  ></el-progress>
                  <div
                    class="level-num flex"
                    :style="{ color: colors[i].lineColor }"
                  >
                    <span
                      v-if="vipInfo.integral * 1 < item.inteOver * 1"
                      :style="{ color: colors[i].wordColor }"
                      >{{ vipInfo.integral }}/{{ item.inteOver }}</span
                    >
                    <span v-else :style="{ color: colors[i].wordColor }"
                      >{{ item.inteOver }}/{{ item.inteOver }}</span
                    >
                    <span
                      :style="{ color: colors[i].lineColor }"
                      v-if="vipInfo.integral * 1 < item.inteOver * 1"
                      >距离升级还差{{
                        item.inteOver * 1 - vipInfo.integral * 1
                      }}帮帮豆</span
                    >
                    <span v-else>您已达成</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="swiper-container1" style="overflow: hidden">
            <div class="swiper-wrapper" style="align-items: flex-start">
              <div
                class="swiper-slide swiper2"
                style="height: 50px; width: 388px"
                v-for="(item, i) in vipData"
                :key="i"
              >
                <div
                  class="swiper-item1 flex"
                  :class="{ itemStyle: i == index22 }"
                  :style="{
                    color: i !== index22 ? colors[i].wordColor : '#848484',
                  }"
                >
                  <div class="dot" :class="{ dotStyle: i !== index22 }">
                    <div
                      class="small-dot"
                      :class="{ smallDotStyle: i !== index22 }"
                      :style="{
                        backgroundColor:
                          i !== index22 ? colors[i].wordColor : '#E0E0E0',
                      }"
                    ></div>
                  </div>
                  <span class="swiper-title">{{ item.title }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 用户会员数据 -->
        <div
          class="userInfo"
          v-show="
            !showActivity && !showActivityDetail && !this.showActivityForm
          "
        >
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 548px;
              height: 125px;
              background: #ffffff;
              box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
              border-radius: 12px 12px 12px 12px;
              opacity: 1;
              white-space: nowrap;
            "
            class="cur-right-wrap"
          >
            <div class="cur-left" style="flex: 1">
              <div class="cur-title">当前等级</div>
              <div class="cur-lev">{{ vipInfo.memberLevelTitle }}</div>
            </div>
            <div class="cur-right" style="flex: 1">
              <div class="cur-title">帮帮豆余额</div>
              <div class="cur-lev">{{ integralTotal2 }}</div>
            </div>
            <div
              class="mingxi pointer"
              v-if="!showDetailsBox"
              style="
                height: 40px;
                line-height: 40px;
                flex: 1;
                width: 92px;
                padding: 0;
              "
              @click="showDetailsBox = !showDetailsBox"
            >
              明细
            </div>
          </div>

          <!-- <div class="mingxi pointer" v-else @click="showDetailsBox = !showDetailsBox">返回</div> -->
        </div>
        <!-- 明细弹窗 -->
        <div
          class="details"
          v-show="
            showDetailsBox &&
            !showActivity &&
            !showActivityDetail &&
            !this.showActivityForm
          "
        >
          <div class="det-close pointer" @click="showDetailsBox = false">×</div>
          <div class="det-title">帮帮豆明细</div>
          <div class="choose-date">
            <el-select
              v-model="value1"
              @change="yearClick"
              placeholder="请选择"
            >
              <el-option
                v-for="item in yearsList"
                :key="item"
                :label="item + '年'"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              v-model="value2"
              @change="monthClick"
              placeholder="请选择"
            >
              <el-option
                v-for="item in monthList"
                :key="item"
                :label="item + '月'"
                :value="item"
              ></el-option>
            </el-select>
          </div>

          <div class="det-list" v-if="value2 == '选择月'">
            <div
              class="det-month"
              v-for="(item, index) in dataList"
              :key="index"
            >
              <div class="list-title flex al-center">
                <div class="list-left">{{ dateList[index] }}</div>
                <div class="list-left">合计 {{ total[index] }}</div>
              </div>
              <div class="list-content" v-for="(ite, i) in item" :key="i">
                <div
                  class="flex ju-bew al-center"
                  @click="openDet(dateList[index], ite.number, i)"
                >
                  <div class="content-left">{{ ite.title }}</div>
                  <div class="content-right">
                    <i
                      v-if="showDet == i && showDetMonth == dateList[index]"
                      class="el-icon-arrow-up"
                    ></i>
                    <i class="el-icon-arrow-down" v-else></i>
                    {{
                      (ite.integral + "" || "").indexOf("-") > -1
                        ? ite.integral
                        : "+" + ite.integral
                    }}
                  </div>
                </div>
                <!-- 明细中的明细 -->
                <div
                  class="det-det"
                  v-show="showDet == i && showDetMonth == dateList[index]"
                >
                  <!-- <div class="det-det"> -->
                  <!-- <vue-scroll :ops="ops" style="height:250px;width:670px"> -->
                  <div class="item-container">
                    <div>
                      <div
                        class="dd-list flex al-center ju-bew"
                        v-for="(items, idx) in dayDetailsList"
                        :key="items.id || idx"
                      >
                        <div class="dd-left">
                          <div class="dd-time">
                            {{ items.rewardTime || items.date }}
                          </div>
                          <div class="dd-title">{{ items.title }}</div>
                        </div>
                        <div class="dd-right">
                          {{ items.realIntegral || items.integral }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- </vue-scroll> -->
                </div>
              </div>
            </div>
          </div>
          <div class="flex det-list ju-center" v-if="dataList.length == 0">
            暂无数据
          </div>
          <div class="det-list" v-else>
            <div
              class="det-month"
              v-for="(item, index) in dataList"
              :key="index"
              v-show="value2.includes(dateList[index].substring(5))"
            >
              <div class="list-title flex al-center">
                <div class="list-left">{{ dateList[index] }}</div>
                <div class="list-left">合计 {{ total[index] }}</div>
              </div>
              <div class="list-content" v-for="(ite, i) in item" :key="i">
                <div
                  class="flex ju-bew al-center"
                  @click="openDet(dateList[index], ite.number, i)"
                >
                  <div class="content-left">{{ ite.title }}</div>
                  <div class="content-right">
                    <i
                      v-if="showDet == i && showDetMonth == dateList[index]"
                      class="el-icon-arrow-up"
                    ></i>
                    <i class="el-icon-arrow-down" v-else></i>
                    {{
                      (ite.integral + "" || "").indexOf("-") > -1
                        ? ite.integral
                        : "+" + ite.integral
                    }}
                  </div>
                </div>
                <!-- 明细中的明细 -->
                <div
                  class="det-det"
                  v-show="showDet == i && showDetMonth == dateList[index]"
                >
                  <!-- <happy-scroll color="red" size="20"> -->
                  <div class="item-container">
                    <div>
                      <div
                        class="dd-list flex al-center ju-bew"
                        v-for="(items, idx) in dayDetailsList"
                        :key="items.id || idx"
                      >
                        <div class="dd-left">
                          <div class="dd-time">
                            {{ items.rewardTime || items.date }}
                          </div>
                          <div class="dd-title">{{ items.title }}</div>
                        </div>
                        <div class="dd-right">
                          {{ items.realIntegral || items.integral }}
                        </div>
                        <!-- <div class="dd-left">
                          <div class="dd-title">{{ items.title }}</div>
                          <div class="dd-time">{{ items.date }}</div>
                        </div>
                        <div class="dd-right">{{ items.integral }}</div> -->
                      </div>
                    </div>
                  </div>
                  <!-- </happy-scroll> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            margin-top: 30px;
          "
          v-show="!showDetailsBox"
        >
          <!-- 今天任务 == 会员管理 -->
          <div class="titLiat">
            <!-- <div @click="leibieClick(3)" :class="taskIndex == 3 ? 'li cur' : 'li'">
              <p>活动中心</p>
              <img v-if="3 == taskIndex" src="../../assets/xuanzhong.png" />
            </div> -->
            <div
              @click="leibieClick(2)"
              :class="taskIndex == 2 ? 'li cur' : 'li'"
            >
              <p>车会员</p>
              <img v-if="2 == taskIndex" src="../../assets/xuanzhong.png" />
            </div>
            <div
              @click="leibieClick(1)"
              :class="taskIndex == 1 ? 'li cur' : 'li'"
            >
              <p>今日任务</p>
              <img v-if="1 == taskIndex" src="../../assets/xuanzhong.png" />
            </div>
          </div>

          <!-- 今天任务 -->
          <template v-if="taskIndex == 1">
            <div v-show="!showDetailsBox">
              <div
                class="task-title"
                :style="!userInfo.merchantId ? '' : 'margin-left:20px;'"
              >
                <div class="title-left">今日任务</div>
                <div class="title-right">
                  完成以下任务，可获得{{ totalIntegral }}个帮帮豆
                </div>
              </div>

              <!-- 任务列表 -->
              <div class="task-list">
                <div
                  class="task-li flex al-center"
                  v-for="(item, index) in taskList"
                  :key="index"
                >
                  <!-- https://pic.bangbangtongcheng.com/static/gzh01.png -->
                  <div class="task-left al-center flex">
                    <img :src="getIconForTitle(item.title)" />
                    <div class="task-desc">
                      <div class="task-title">
                        {{ item.title }}
                      </div>
                      <div class="task-dot">+{{ item.integral }}帮帮豆</div>
                    </div>
                  </div>
                  <div class="task-right al-center flex" v-if="taskName[index]">
                    <div class="task-btn finish" v-if="item.CS == item.num">
                      {{ taskName[index].finish }}
                    </div>
                    <div
                      class="task-btn pointer"
                      v-else
                      @click="goFinish(item.number)"
                    >
                      {{ taskName[index].noFinish }}
                    </div>
                    <div class="task-num">{{ item.CS }}/{{ item.num }}次</div>
                  </div>
                </div>
              </div>

              <div class="more-task">— 更多任务，敬请期待 —</div>
            </div>
          </template>
          <!-- 车会员 -->
          <!-- 新增部分 -->
          <template v-if="taskIndex == 2 && !beMerchantPageStatus">
            <div
              class="seperate"
              style="
                height: 1px;
                background-color: #dcdcdc;
                margin-top: 10px;
                position: relative;
              "
            ></div>
            <div
              style="text-align: center; position: relative"
              v-if="
                !userInfo.merchantId &&
                userInfo.businessType == 2 &&
                userInfo.isShop == 1 &&
                (userInfo.shopType == '3' || userInfo.shopType == '4')
              "
            >
              <img
                src="https://pic.bangbangtongcheng.com/static/member/joinMember2.png"
                style="
                  margin: 20px auto 10px;
                  width: 492px;
                  height: 132px;
                  object-fit: contain;
                "
                @click.stop="beMerchantPage(), (beMerchantPageStatus = true)"
              />
              <img
                src="https://pic.bangbangtongcheng.com/static/member/be-merchant-btn.png"
                style="
                  width: 64px;
                  height: 64px;
                  position: absolute;
                  right: 246px;
                  top: 62px;
                  transform-origin: center;
                "
                class="animal-scale"
              />
            </div>
          </template>

          <template v-if="taskIndex == 2">
            <template v-if="isMerchantStatus">
              <div class="is-merchant-page">
                <div class="merchant-side">
                  <div
                    class="merchant-side-item"
                    :class="merchantStatusActive == 1 ? 'active' : ''"
                    @click="changeMerchantStatus(1)"
                  >
                    礼品管理
                  </div>
                  <div
                    class="merchant-side-item"
                    :class="merchantStatusActive == 2 ? 'active' : ''"
                    @click="changeMerchantStatus(2)"
                    v-if="!userInfo.merchantStaffId"
                  >
                    员工管理
                  </div>
                  <div
                    class="merchant-side-item"
                    :class="merchantStatusActive == 3 ? 'active' : ''"
                    @click="changeMerchantStatus(3)"
                    v-if="!userInfo.merchantStaffId"
                  >
                    出入库记录
                  </div>
                </div>
                <div class="merchant-mian">
                  <template v-if="merchantStatusActive == 1">
                    <div class="merchant-select">
                      <el-select
                        v-model="merchantValue"
                        placeholder="请选择"
                        style="margin-right: 20px"
                        @change="change11"
                      >
                        <el-option
                          v-for="item in merchantOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-select
                        v-model="merchantValue2"
                        placeholder="请选择"
                        v-if="merchantDetail"
                        @change="change22"
                      >
                        <el-option
                          v-for="item in merchantOptions2"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <template v-if="!merchantDetail">
                      <div class="merchant1-list">
                        <div
                          class="empty-wrap"
                          v-if="giftInformationList.length == 0"
                        >
                          <el-empty description="暂无数据"> </el-empty>
                        </div>
                        <div
                          class="merchant1-item"
                          v-for="(i, index) in giftInformationList"
                          @click.stop="selectGift(i)"
                        >
                          <template v-if="i.giftId == -2">
                            <div class="merchant1-item-left">
                              <img
                                src="@/assets/android.png"
                                alt=""
                                srcset=""
                              />
                            </div>
                            <div class="merchant1-item-right">
                              <div class="merchant1-title">二维码</div>
                              <div
                                class="merchant1-info"
                                style="white-space: nowrap"
                              >
                                <div class="merchany-info-box line1">
                                  已绑定：{{ i.bound }}
                                </div>
                                <div
                                  class="merchany-info-box"
                                  style="width: auto"
                                >
                                  未绑定：{{ i.unbound }}
                                </div>
                              </div>
                            </div>
                          </template>
                          <template v-else>
                            <div class="merchant1-item-left">
                              <img
                                :src="
                                  i.giftInformation &&
                                  i.giftInformation.giftPicture
                                "
                                alt=""
                                srcset=""
                              />
                            </div>
                            <div class="merchant1-item-right">
                              <div class="merchant1-title">
                                {{
                                  (i.giftInformation &&
                                    i.giftInformation.giftName) ||
                                  ""
                                }}
                              </div>
                              <div
                                class="merchant1-info"
                                style="white-space: nowrap"
                              >
                                <div class="merchany-info-box line1">
                                  当月送出：{{ i.sendTotal }}
                                </div>
                                <div
                                  class="merchany-info-box"
                                  style="width: auto"
                                >
                                  库存：{{ i.stock }}
                                </div>
                              </div>
                            </div>
                          </template>
                        </div>
                      </div>
                    </template>
                    <template v-else>
                      <div class="merchant1-list1-title">
                        <span style="margin-right: 80px"
                          >{{ modemode == 2 ? "已绑定" : "已送出" }}:{{
                            newTotal2
                          }}份</span
                        >
                        <span>当前库存:{{ curStock }}份</span>
                      </div>
                      <div class="merchant1-list1">
                        <div
                          class="empty-wrap"
                          v-if="giftDistributionRecord.length == 0"
                        >
                          <el-empty description="暂无数据"> </el-empty>
                        </div>
                        <div
                          class="merchant1-item1"
                          v-for="i in giftDistributionRecord"
                        >
                          <div>车牌号:{{ i.licensePlateNumber }}</div>
                          <div>时间:{{ i.lssuingTime }}</div>
                          <div>礼品名称: {{ i.giftName }} X1</div>
                          <div>发放人:{{ i.issuerName || "谁" }}</div>
                        </div>
                      </div>
                      <div class="fenye" v-if="giftDistributionRecord.length">
                        <el-pagination
                          background
                          layout="prev, pager, next"
                          :total="newTotal2"
                          :current-page="newPager2.pageNo"
                          :page-size="newPager2.pageSize"
                          @current-change="CollectCurrentChange2"
                        ></el-pagination>
                      </div>
                    </template>
                  </template>
                  <template v-if="merchantStatusActive == 2">
                    <div class="merchant2-list">
                      <div class="merchant2-head">
                        <div class="merchant2-section">员工姓名</div>
                        <div class="merchant2-section">手机号</div>
                        <div class="merchant2-section">
                          <button
                            class="btn c-comfirm-btn"
                            @click="changeMerchantStatusActiveManage"
                          >
                            {{ merchantStatusActiveManage ? "完成" : "管理" }}
                          </button>
                        </div>
                      </div>
                      <div class="empty-wrap" v-if="employeesList.length == 0">
                        <el-empty description="暂无数据"> </el-empty>
                        <!-- <img src="../../assets/bbcz/empty@2x.png" class="empty-wrap-img" style="margin-top: 20px"
                          alt="" />

                        <p>暂无数据</p> -->
                      </div>
                      <div class="merchant2-item" v-for="i in employeesList">
                        <div
                          class="box-check"
                          v-if="merchantStatusActiveManage"
                        >
                          <!-- <el-checkbox :value="true" @change="selectBox(i)"></el-checkbox> -->
                        </div>
                        <div class="merchant2-section">{{ i.fullName }}</div>
                        <div class="merchant2-section">
                          {{ i.cellphoneNumber }}
                        </div>
                        <div class="merchant2-section">
                          <!-- <div v-if="merchantStatusActiveManage"
                            style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border: 1px solid #64b6a8;border-radius: 2px;width: 56px;height: 24px;line-height: 24px;color: #64b6a8;cursor: default;"
                            @click="merchantOperate(i)">
                            删除
                          </div> -->
                          <img
                            v-if="merchantStatusActiveManage"
                            src="@/assets/v2/trash2.png"
                            style="
                              width: 24px;
                              position: absolute;
                              top: 50%;
                              left: 50%;
                              transform: translate(-50%, -50%);
                              border: 1px solid transparent;
                              border-radius: 2px;
                              width: 24px;
                              height: 24px;
                              line-height: 24px;
                              color: #64b6a8;
                              cursor: default;
                            "
                            @click="merchantOperate(i)"
                          />
                        </div>
                      </div>
                      <button
                        class="merchant2-btn btn c-comfirm-btn"
                        @click.stop="merchantOperate()"
                      >
                        {{ "新增员工(" + employeesList.length + "/5)" }}
                      </button>
                    </div>
                  </template>
                  <template v-if="merchantStatusActive == 3">
                    <template v-if="!merchantRecordDetail">
                      <div class="merchant3-list">
                        <div
                          class="empty-wrap"
                          v-if="giftInventoryByMerchantsId.length == 0"
                        >
                          <el-empty description="暂无数据"> </el-empty>
                        </div>
                        <div
                          class="merchant3-item"
                          @click="selectGift3(i)"
                          v-for="i in giftInventoryByMerchantsId"
                          :key="i.id"
                        >
                          <div class="merchant3-item-top">
                            <div class="merchant3-item-left">
                              <span class="merchant3-item-left">{{
                                i.type == 1 ? "礼品送货单" : "礼品退货单"
                              }}</span>
                              <button
                                class="btn c-cancel-btn"
                                v-if="i.confirmStatus"
                                :class="
                                  i.confirmStatus == 0
                                    ? ''
                                    : i.confirmStatus == 1
                                    ? i.type == 1
                                      ? 'con1'
                                      : 'dangerous'
                                    : 'con'
                                "
                              >
                                {{
                                  i.confirmStatus == 0
                                    ? ""
                                    : i.confirmStatus == 1
                                    ? i.type == 1
                                      ? "收货成功"
                                      : "退货成功"
                                    : i.type == 1
                                    ? "收货取消"
                                    : "退货取消"
                                }}
                              </button>
                            </div>
                            <div class="merchant3-item-right">
                              展开<span class="el-icon-arrow-down"></span>
                            </div>
                          </div>
                          <div class="merchant3-item-bottom">
                            {{ i.type == 1 ? "送货" : "退货" }}时间：{{
                              i.updateDate
                            }}
                          </div>
                        </div>
                      </div>
                      <div class="fenye">
                        <el-pagination
                          background
                          layout="prev, pager, next"
                          :total="newTotal"
                          :current-page="newPager1.pageNo"
                          :page-size="newPager1.pageSize"
                          @current-change="CollectCurrentChange3"
                        ></el-pagination>
                      </div>
                    </template>
                    <template v-else>
                      <div class="merchant3-detail">
                        <div
                          @click.stop="selectGift32"
                          class="merchant3-detail-title"
                          v-if="curGift3.type == 2"
                        >
                          <div class="merchant3-detail-title-left">
                            <span class="merchant3-detail-title-name"
                              >礼品退货单</span
                            >
                            <button
                              v-if="curGift3.confirmStatus == 1"
                              class="merchant3-detail-title-status btn c-cancel-btn dangerous"
                            >
                              退货成功
                            </button>
                            <button
                              v-if="curGift3.confirmStatus == 2"
                              class="merchant3-detail-title-status btn c-cancel-btn con"
                            >
                              退货取消
                            </button>
                          </div>
                          <div class="merchant3-detail-title-right">
                            收起<span class="el-icon-arrow-up"></span>
                          </div>
                        </div>

                        <div
                          @click.stop="selectGift32"
                          class="merchant3-detail-title"
                          v-if="curGift3.type == 1"
                        >
                          <div class="merchant3-detail-title-left">
                            <span class="merchant3-detail-title-name"
                              >礼品送货单</span
                            >
                            <button
                              v-if="curGift3.confirmStatus == 1"
                              class="merchant3-detail-title-status btn c-cancel-btn con1"
                            >
                              收货成功
                            </button>
                            <button
                              v-if="curGift3.confirmStatus == 2"
                              class="merchant3-detail-title-status btn c-cancel-btn con"
                            >
                              收货取消
                            </button>
                          </div>
                          <div class="merchant3-detail-title-right">
                            收起<span class="el-icon-arrow-up"></span>
                          </div>
                        </div>

                        <div class="merchant3-detail-time">
                          {{ curGift3.type == 1 ? "送货" : "退货" }}时间：{{
                            curGift3.updateDate
                          }}
                        </div>
                        <div class="merchant3-list1">
                          <div class="merchant3-head">
                            <div class="merchant3-section">礼品名称</div>
                            <div class="merchant3-section">
                              {{ curGift3.type == 1 ? "送货" : "退货" }}数量
                            </div>
                            <div class="merchant3-section">库存总计</div>
                          </div>
                          <div
                            class="merchant3-item1"
                            v-for="i2 in curFrontList"
                          >
                            <div class="merchant3-section">
                              {{ i2.giftName }}
                            </div>
                            <div class="merchant3-section">
                              {{ i2.sendNumber }}
                            </div>
                            <div class="merchant3-section">{{ i2.stock }}</div>
                          </div>
                        </div>
                        <div class="merchant3-btn-wrap1">
                          <template v-if="!curGift3.confirmStatus">
                            <button
                              @click="confirm3(true)"
                              class="merchant3-btn btn c-cancel-btn"
                              style="margin-right: 40px"
                            >
                              确认{{ curGift3.type == 1 ? "收货" : "退货" }}
                            </button>
                            <button
                              @click="confirm3(false)"
                              class="merchant3-btn btn c-cancel-btn"
                            >
                              拒绝{{ curGift3.type == 1 ? "收货" : "退货" }}
                            </button>
                          </template>
                        </div>
                        <div class="merchant3-pagination">
                          <div
                            @click="preV3"
                            class="page-pre page-btn el-icon-arrow-left"
                          ></div>
                          <div class="page-num">
                            {{ frondendPager.pageNo }}/{{ frontTotalNum }}
                          </div>
                          <div
                            @click="nextV3"
                            class="page-next page-btn el-icon-arrow-right"
                          ></div>
                        </div>
                      </div>
                    </template>
                  </template>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="vehicle-title" v-show="!beMerchantPageStatus">
                <div
                  style="margin-right: 120px"
                  :class="vehicleIndex == 1 ? 'xuan' : ''"
                  @click="selectVehicleIndex(1)"
                >
                  待领会员礼
                </div>
                <div
                  style="margin-right: 120px"
                  :class="vehicleIndex == 2 ? 'xuan' : ''"
                  @click="selectVehicleIndex(2)"
                >
                  领取记录
                </div>
                <div
                  :class="vehicleIndex == 3 ? 'xuan' : ''"
                  @click="selectVehicleIndex(3)"
                >
                  车辆管理
                </div>
              </div>

              <div
                class="be-merchant-page"
                style="margin: 0 40px; text-align: center"
                v-if="beMerchantPageStatus"
              >
                <div
                  class="be-merchant-title"
                  style="
                    height: 28px;
                    font-size: 20px;
                    font-weight: 400;
                    color: #333333;
                    line-height: 28px;
                    margin: 20px auto 10px;
                  "
                >
                  成为车会员商家
                </div>
                <img
                  class="be-merchant-image"
                  src="@/assets/v2/become.jpg"
                  style="width: 550px; height: 220px"
                />
                <div
                  class="be-merchant-content"
                  style="text-align: left; margin-top: 40px"
                >
                  <div class="be-merchant-content-mian">
                    车会员商家是与帮帮同城平台合作的会员商家加入我们，成为平台商家有以下几个好处:
                  </div>
                  <div class="be-merchant-content-title">
                    巨大的潜在客户群体
                  </div>
                  <div class="be-merchant-content-mian">
                    平台拥有庞大的用户基础和访问流量，成为平台商家可以直接接触到这一庞大的潜在客户群体。商家可以通过平台的曝光度和用户流量，扩大品牌知名度，吸引更多的潜在客户。
                  </div>
                  <div class="be-merchant-content-title">扩大市场和客户群</div>
                  <div class="be-merchant-content-mian">
                    入驻商家可以获得更广阔的市场和客户群。通过入驻特定平台或市场，商家可以将自己的产品或服务推广给平台上已有的用户群体，从而增加曝光度和潜在客户数量。
                  </div>
                  <div class="be-merchant-content-title">增加销售机会</div>
                  <div class="be-merchant-content-mian">
                    入驻商家可以利用平台的流量和用户基础，增加销售机会。帮助商家更好地吸引用户并促成交易。
                  </div>
                  <div class="be-merchant-content-title">降低营销成本</div>
                  <div class="be-merchant-content-mian">
                    入驻商家可以共享平台的品牌知名度和市场推厂资源，从而降低自身的营销成本。平台通常会进行广告宣传、推广活动等，吸引用户流量和关注度，商家可以借助这些资源来提升自己的曝光度和销售额。
                  </div>
                  <div class="be-merchant-content-title">
                    提供技术支持和服务
                  </div>
                  <div class="be-merchant-content-mian">
                    入驻商家可以获得平台提供的技术支持和服务。
                  </div>
                  <div class="be-merchant-content-title">
                    合作机会和联盟效应
                  </div>
                  <div class="be-merchant-content-mian">
                    平台通常会组织各种合作活动和推广活动，商家成为平台商家后，可以参与这些活动并与其他商家建立合作关系。这种合作机会和联盟效应可以带来更多的曝光和互补优势，推动业务的发展。
                  </div>
                  <div class="be-merchant-content-title">
                    获得平台信誉和口碑
                  </div>
                  <div class="be-merchant-content-mian">
                    <div>
                      入驻商家可以借助平台的信誉和口碑，提升自身的品牌形象和信任度。平台通常会有一定的审核机制和评价系统，商家通过提供优质的产品和服务，可以获得用户的好评和信赖，进而增加用户的忠诚度和复购率。
                    </div>
                    <div>
                      通过成为平台商家，商家可以获得平台的市场客户群和服务，增加销售机会、降低成本、提升品牌曝光和信誉度，并享受平台提供的技术支持和数据分析等服务，从而实现业务的增长和发展。
                    </div>
                  </div>
                  <div class="be-merchant-content-title">
                    帮帮同城期待您的加入
                  </div>
                </div>
                <div
                  class="be-merchant-operate"
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 60px auto 45px;
                  "
                >
                  <template v-if="!tempMerchantStatus && showStatus">
                    <button
                      class="c-cancel-btn btn"
                      @click="beMerchantPageStatus = false"
                      style="
                        margin-right: 40px;
                        width: 172px;
                        line-height: 38px;
                      "
                    >
                      我再想想
                    </button>
                    <button
                      class="c-comfirm-btn btn"
                      @click.stop="become"
                      style="width: 172px; line-height: 38px"
                    >
                      我要加入
                    </button>
                  </template>
                  <template v-if="tempMerchantStatus && showStatus">
                    <button
                      class="c-cancel-btn btn"
                      disabled
                      style="width: 384px; line-height: 38px"
                    >
                      已提交申请，请耐心等待
                    </button>
                  </template>
                </div>
              </div>
              <div
                class="empty-wrap"
                v-if="
                  ((vehicleIndex == 2 && receivRecordList.length == 0) ||
                    (vehicleIndex == 3 && licensePlateList.length == 0)) &&
                  !beMerchantPageStatus
                "
              >
                <img
                  src="../../assets/bbcz/empty@2x.png"
                  class="empty-wrap-img"
                  alt=""
                />
                <p v-if="vehicleIndex == 2">您还没有领取过礼品哦</p>
                <p v-if="vehicleIndex == 3">您还没有绑定的车车呢</p>
                <p>打开手机端，按提示前往指定门店</p>
                <p>领取会员码，成为会员每月领取好礼</p>
              </div>
              <!-- 待领会员礼 -->
              <div
                class="demand-record"
                v-if="vehicleIndex == 1 && !beMerchantPageStatus"
              >
                <div
                  class="demand-record-item"
                  v-for="(item, index) in membersCollectList"
                  :key="index"
                >
                  <div class="demand-record-info">
                    <div class="demand-record-ico-wrap">
                      <img
                        src="../../assets/bbcz/gifticon@2x.png"
                        alt=""
                        class="demand-record-ico"
                      />
                    </div>
                    <div class="demand-record-title">
                      {{ item.monthContent }}
                    </div>
                  </div>

                  <div
                    class="demand-record-status"
                    :class="
                      item.receiveContent == '去领取'
                        ? 'available'
                        : 'declaraed'
                    "
                    @click.stop="vehicleClick(1, item)"
                  >
                    {{ item.receiveContent }}
                  </div>
                </div>
                <div
                  class="more-task"
                  style="margin-bottom: 0; padding-bottom: 0"
                >
                  — 更多好礼，敬请期待 —
                </div>
              </div>
              <!-- 领取记录 -->
              <div
                class="demand-gift"
                v-if="vehicleIndex == 2 && !beMerchantPageStatus"
              >
                <div
                  class="demand-gift-item"
                  v-for="(item, index) in receivRecordList"
                  :key="index"
                >
                  <div class="demand-gift-time">{{ item.monthContent }}</div>
                  <div
                    class="demand-gift-info"
                    @click.stop="vehicleClick(2, item, index)"
                  >
                    查看明细>
                  </div>
                </div>
              </div>

              <!-- 车辆管理 -->
              <div
                class="vehicle-management"
                v-if="vehicleIndex == 3 && !beMerchantPageStatus"
              >
                <div
                  class="vehicle-management-item"
                  v-for="(item, index) in licensePlateList"
                  :key="index"
                >
                  <div class="vehicle-management-info">
                    <div class="vehicle-management-title">
                      {{ item.licensePlateNumber }}
                    </div>
                    <div class="vehicle-management-time">
                      绑定时间:{{ item.bindingTime }}
                    </div>
                  </div>

                  <div
                    class="vehicle-management-btn"
                    @click.stop="vehicleClick(3, item, index)"
                  >
                    解除绑定
                  </div>
                </div>
              </div>
            </template>
          </template>
          <!-- 活动中心 -->
          <template v-if="taskIndex == 3">
            <div
              class="activity-center"
              @click="(curActivity = item), activetyMore()"
              v-for="item in aboutList"
              :key="item.id"
            >
              <img class="activity-left" :src="item.activityPicture" />
              <div class="activity-right">
                <div class="activity-status" style="background: #64b6a8">
                  {{ item.activityStatus }}
                </div>
                <div class="activity-title line1">
                  {{ item.activityTitle }}
                </div>
                <div class="activity-start-time" style="margin-bottom: 6px">
                  开始时间：{{ item.startTime }}
                </div>
                <div class="activity-end-time">
                  结束时间：{{ item.endTime }}
                </div>
                <div
                  class="activity-more"
                  @click.stop="(curActivity = item), activetyMore()"
                >
                  查看详情
                </div>
              </div>
            </div>

            <div
              class="more-task"
              style="margin-bottom: 40px; margin-top: 0; padding-bottom: 0"
            >
              — 更多活动，敬请期待 —
            </div>
          </template>
        </div>
        <!-- 活动详情 -->
        <div class="new-content" v-show="showActivity">
          <div class="new-title">{{ aboutData.activityTitle }}</div>
          <view
            class="beginMinute"
            v-if="curActivity.activityStatus != '进行中'"
          >
            {{ aboutData.activityStatus }}
          </view>
          <div class="new-main" v-if="curActivity.activityStatus == '进行中'">
            <img
              src="@/assets/v3/vip-bg2.png"
              class="new-main-img"
              alt=""
              srcset=""
            />
            <div class="new-main-top">
              <div class="new-main-top-title">我的活动进度</div>
              <div class="new-main-top-progress">
                <div
                  class="new-main-top-progress-in"
                  :style="
                    'width:' +
                    ((aboutData.activityProgressBar || '').indexOf('%')
                      ? Math.min(
                          +(aboutData.activityProgressBar || '').split('%')[0],
                          100
                        )
                      : 0) +
                    '%'
                  "
                ></div>
                <span
                  >{{
                    (aboutData.activityProgressBar || "").indexOf("%")
                      ? Math.min(
                          +(aboutData.activityProgressBar || "").split("%")[0],
                          100
                        )
                      : 0
                  }}
                  %</span
                >
              </div>
              <div class="new-main-top-desc" v-if="!aboutData.difference">
                恭喜达标，去兑换精美礼品吧！
              </div>
              <div class="new-main-top-desc" v-else>
                还差{{ aboutData.difference || 0 }}帮帮豆就能达标了
              </div>
              <div class="new-main-top-total">
                <span>累计获取帮帮豆</span>
                <span>{{ aboutData.accumulatedGuildBeansObtained }}</span>
              </div>
            </div>
            <div class="new-main-bottom">
              <div class="task-list" style="margin: 0; margin-top: 20px">
                <div
                  class="task-li flex al-center"
                  v-for="(item, index) in aboutData.merberRuleDTOS || []"
                  :key="index"
                  style="padding: 12px 0"
                >
                  <!-- https://pic.bangbangtongcheng.com/static/gzh01.png -->
                  <div class="task-left al-center flex">
                    <img :src="getIconForTitle(item.title)" />
                    <div class="task-desc">
                      <div class="task-title">
                        {{ item.title }}
                      </div>
                      <div class="task-dot">+{{ item.integral }}帮帮豆</div>
                    </div>
                  </div>
                  <div class="task-right al-center flex" v-if="taskName[index]">
                    <div
                      class="task-btn finish"
                      v-if="item.completedTimes == item.num"
                    >
                      {{ getTaskName(item.title).finish }}
                    </div>
                    <div
                      class="task-btn pointer"
                      v-else
                      @click="goFinish(item.number)"
                    >
                      {{ getTaskName(item.title).noFinish }}
                    </div>
                    <!-- <div class="task-num">{{ item.CS }}/{{ item.num }}次</div> -->
                  </div>
                </div>
              </div>
            </div>
            <div class="new-main-bottom-text">
              *活动时间：{{ aboutData.startTime }}——{{ aboutData.endTime }}
            </div>
          </div>
          <div class="new-title" style="margin-top: 24px">活动详情</div>
          <div class="new-p" v-html="aboutData.activityDescription"></div>
          <div class="new-title" style="margin-top: 40px">礼品列表</div>
          <div class="new-desc" style="margin-bottom: 40px">
            完成活动任务/达标即可选取精美礼品一份！数量有限，先到先得！
          </div>
          <div class="present-list">
            <div
              class="present-item"
              v-for="item in aboutData.eventGifts || []"
              :key="item.id"
              @click.stop="activetyPrizeMore(item)"
            >
              <img :src="item.giftPicture" alt="" class="present-item-img" />
              <div style="" class="">
                <!-- <div class="present-item-btn " v-if="giftChage == 1 || aboutData.complianceStatus != '已达标'"
                  style="flex-shrink: 0;color: #c4c4c4;" @click.stop>
                  {{ item.redemptionStatus == "已兑换" ? "已兑换" : "兑换" }}
                </div>
                <div class="present-item-btn pointer active" style="flex-shrink: 0;color: #64b6a8;" v-else
                  @click.stop="duihuan(item)">
                  {{ item.redemptionStatus == "已兑换" ? "已兑换" : "兑换" }}
                </div>
                <div class="present-item-name line1"> {{ item.giftName }}</div> -->
                <div class="present-item-name line1">{{ item.giftName }}</div>
                <div
                  class="present-item-btn pointer"
                  v-if="
                    giftChage == 1 || aboutData.complianceStatus != '已达标'
                  "
                  style="background-color: #eaeaea"
                  @click.stop
                >
                  {{ item.redemptionStatus == "已兑换" ? "已兑换" : "兑换" }}
                </div>
                <div
                  class="present-item-btn pointer active"
                  v-else
                  @click.stop="duihuan(item)"
                >
                  {{ item.redemptionStatus == "已兑换" ? "已兑换" : "兑换" }}
                </div>
              </div>
            </div>
          </div>
          <div class="new-title" style="margin-top: 24px">活动规则</div>
          <div class="new-p" v-html="aboutData.activityRules"></div>
          <div style="height: 65px"></div>
        </div>
        <!-- 活动奖品详情 -->
        <div class="new-content2" v-show="showActivityDetail">
          <i class="new-content2-back el-icon-arrow-left" @click="backDui"></i>
          <div class="new-content2-main">
            <div class="new-title" style="color: #333333; font-size: 24px">
              {{ giftData.giftName }}
            </div>
            <div
              class="new-desc"
              style="color: #999999; font-size: 20px"
              v-html="giftData.giftDetails"
            ></div>

            <!-- <div class="new-desc" style="color: #999999; font-size: 20px">
              规格参数：缓缓流下的时光，照进你的眼睛，流进你的心里，印在你的笑里。
            </div> -->
            <div class="new-title" style="color: #333333; font-size: 24px">
              兑换细则
            </div>
            <div
              class="new-desc"
              style="color: #999999; font-size: 20px"
              v-html="giftData.exchangeRules"
            ></div>
            <!-- <div class="new-desc" style="color: #999999; font-size: 20px">
              重要声明
              1.除商品本身不能正常兑换外，商品一-经兑换，一律不可更换，请用户兑换前仔细参照使用规则、使用说明、有效期等重要信息;
              2.对于每位用户限兑一次的商品，若发现同一用户使用多个账号兑换同一商品，则会被取消订单，被扣除帮帮豆返还;
              3.通过非法途径获得兑换资格进行的正常兑换行为，或不按商品使用规则进行兑换，商家有权不提供服务;
              4.凡以不正当手段(包括但不限于作弊、扰乱系统、实施网络攻击等)进行兑换，平台有权终止该次兑换。
              特别说明 若有任何疑问，可联系活动主办方:15192081808
            </div> -->
            <div
              class="new-btn"
              @click="tips()"
              v-if="
                giftChage == 1 ||
                ((aboutData.activityProgressBar || '').indexOf('%') > -1 &&
                  +(aboutData.activityProgressBar || '').split('%')[0] <= 100)
              "
              style="background-color: #c4c4c4"
            >
              兑换
            </div>
            <div class="new-btn" @click="goduihuan()" v-else>兑换</div>
          </div>
        </div>
        <!-- 活动奖品表单 -->
        <div class="new-form" v-show="showActivityForm">
          <i
            class="new-content2-back el-icon-arrow-left"
            v-if="duihuanMethods == 2"
            @click="backDui"
          ></i>
          <div class="new-desc">
            <span style="color: red">*</span>共{{
              (giftKey.exchangeMethod || "").indexOf(",") > -1 ? "2" : "1"
            }}
            两种兑换方式供您选择
          </div>
          <div
            class="new-title"
            style="
              margin-right: 30px;
              display: inline-block;
              vertical-align: top;
            "
            :class="duihuanMethods == 2 ? 'active' : ''"
            @click="changeDuihuanMethods(2)"
            :style="
              (giftKey.exchangeMethod || '').indexOf('1') > -1
                ? ''
                : 'color: #dddddd;'
            "
          >
            线下领取
          </div>
          <div
            class="new-title"
            style="display: inline-block; vertical-align: top"
            :class="duihuanMethods == 1 ? 'active' : ''"
            :style="
              (giftKey.exchangeMethod || '').indexOf('2') > -1
                ? ''
                : 'color: #dddddd;'
            "
            @click="changeDuihuanMethods(1)"
          >
            快递邮寄
          </div>
          <template v-if="duihuanMethods == 2">
            <div class="new-qrcode">
              <div class="new-qrcode-title">扫码下载打开APP去领取会员礼</div>
              <div class="new-qrcode-content">
                <div class="new-qrcode-left new-qrcode-item">
                  <img
                    src="@/assets/android.png"
                    alt=""
                    class="new-qrcode-img"
                  />
                  <span class="new-qrcode-text">安卓</span>
                </div>
                <div class="new-qrcode-right new-qrcode-item">
                  <img
                    src="@/assets/iosDown.png"
                    alt=""
                    class="new-qrcode-img"
                  />
                  <span class="new-qrcode-text">IOS</span>
                </div>
              </div>
            </div>
          </template>

          <address-manage
            :obj="giftKey"
            @back="backDui"
            v-if="duihuanMethods == 1"
          ></address-manage>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog title :visible.sync="showRule" :show-close="true" width="28%">
      <div class="flex ju-center al-center flex-c">
        <div class="rule-title">
          <span>—</span> 规则说明
          <span>—</span>
        </div>
        <vue-scroll style="height: 450px">
          <div
            style="height: 450px; margin: 0 5px"
            v-if="vipData[0]"
            v-html="vipData[0].content"
          ></div>
        </vue-scroll>
      </div>
    </el-dialog>
    <div class="popupBox" v-if="showRepost" @click="showRepost = false">
      <div class="popupit" @click.stop>
        <div class="close-repost">
          <span @click="showRepost = false">×</span>
        </div>
        <div class="title" style="text-align: center">微信扫码打开小程序</div>
        <img
          style="
            display: block;
            width: 150px;
            height: 150px;
            margin: 40px auto 10px;
          "
          src="../../assets/ma2.jpg"
          alt
        />
        <div class="btn" style="margin: 0 0 40px"></div>
      </div>
    </div>
    <div class="popupBox" v-show="showQrcode" @click="showQrcode = false">
      <div class="popupit" @click.stop>
        <div class="close-repost">
          <span @click="showQrcode = false">×</span>
        </div>
        <div
          class="flex ju-center al-center flex-c"
          style="margin: 54px 0 48px 0"
        >
          <div id="qrCode" ref="qrCodeDiv"></div>

          <div
            style="
              font-weight: 500;
              margin: 48px 0 0 0;
              color: #64b6a8;
              font-size: 24px;
            "
          >
            扫码关注微信公众号
          </div>
        </div>
      </div>
    </div>
    <!-- 查看明细 -->
    <div class="bgmask" v-if="showForm" @click="showForm = false">
      <div class="view-details" @click.stop>
        <img
          src="../../assets/bbcz/employeeAddCancel@2x.png"
          alt=""
          class="view-details-close-ico"
          @click="showForm = false"
        />
        <div class="view-details-title">领取详情</div>
        <div class="view-details-question" @click="openFeedback">问题反馈</div>
        <div class="gift-list">
          <div
            v-for="(item1, index1) in productList"
            class="gift-item"
            :key="index1"
          >
            <div class="gift-title" @click="click(item1, index1)">
              <span style="width: 141px; text-align: center">{{
                item1.title
              }}</span>
              <span>{{ item1.desc }}</span>
              <span
                class="gift-title-ico el-icon-arrow-down"
                :class="item1.unfold ? 'up' : 'down'"
              ></span>
            </div>
            <collapse-transition>
              <div
                style="
                  max-height: 386px;
                  overflow-y: hiddle;
                  box-sizing: border-box;
                "
                v-if="item1.unfold"
              >
                <div
                  class="gift-details"
                  style="max-height: 356px; overflow-y: auto"
                >
                  <div
                    class="gift-details-item-wrap"
                    v-for="(item2, index2) in item1.children"
                    :key="index2"
                  >
                    <div class="gift-details-item">
                      <img
                        src="../../assets/1.jpg"
                        class="gift-details-img"
                        alt=""
                      />
                      <div class="gift-details-info">
                        <div class="gift-details-title">{{ item2.title }}</div>
                        <div class="gift-details-time">{{ item2.time }}</div>
                        <div class="gift-details-shopName">
                          {{ item2.shopName }}
                        </div>
                      </div>
                      <div class="gift-details-status">
                        {{ item2.status == 1 ? "已领取" : "已过期" }}
                      </div>
                    </div>
                  </div>
                  <div class="empty-wrap" v-if="item1.children == 0">
                    <img
                      src="../../assets/bbcz/empty@2x.png"
                      class="empty-wrap-img"
                      style="margin-top: 20px"
                      alt=""
                    />

                    <p>暂无数据</p>
                  </div>
                </div>
              </div>
            </collapse-transition>
          </div>
        </div>
        <div style="height: 72px"></div>
      </div>
    </div>

    <!-- /弹窗 -->
    <floor></floor>
    <bbcz-feedback ref="feedback"></bbcz-feedback>
    <masks ref="masks"></masks>
    <membershipManagement
      ref="membershipManagement"
      :showWithForm="true"
    ></membershipManagement>
  </div>
</template>
<script>
import Swiper from "swiper";
// import VueQr from "vue-qr";
import QRCode from "qrcodejs2";
import floor from "../../components/floor";
import heads from "../../components/head";
import ceList from "../../components/ceList.vue";
import titlesearch from "../../components/titlesearch.vue";
import CollapseTransition from "@/utils/collapse-transition";
import bbczFeedback from "../index/comp/bbcz-feedback.vue";
import AddressManage from "../invite/comp/addressManage.vue";
import membershipManagement from "./bbcz/membershipManagement.vue";
import masks from "./mask.vue";
export default {
  components: {
    floor,
    heads,
    ceList,
    // VueQr,
    titlesearch,
    CollapseTransition,
    bbczFeedback,
    AddressManage,
    masks,
    membershipManagement,
  },
  inject: ["getMsgFromAdmin"],
  data() {
    return {
      modemode: "",
      qrRecord: {},
      newTotal2: 0,
      showStatus: false,
      showPager: true,
      newPager2: {
        pageNo: 1,
        pageSize: 5,
      },
      newPager1: {
        pageNo: 1,
        pageSize: 5,
      },
      frondendPager: {
        pageNo: 1,
        pageSize: 5,
      },
      giftDistributionRecord: [],

      giftInformationList: [],
      curGift: {},
      curGift3: {},
      newTotal: 0,
      giftInventoryByMerchantsId: [],
      employeesList: [],
      merchantStatusActiveManage: false, //是商家 活跃2
      merchantRecordDetail: false, //是商家 活跃3 详情
      merchantDetail: false, //是商家 活跃1 详情
      merchantOptions: [],
      merchantOptions2: [
        {
          value: 1,
          label: "最近3天",
        },
        {
          value: 2,
          label: "最近7天",
        },
        {
          value: 3,
          label: "最近30天",
        },
      ],
      merchantValue: "-1", //是商家 活跃1 selectmodel
      merchantValue2: 1, //是商家 活跃1 selectmodel2
      merchantStatusActive: 1, //是商家 活跃1
      isMerchantStatus: false, //是商家
      tempMerchantStatus: false, //成为商家中间状态
      beMerchantPageStatus: false,
      options: [],
      showActivity: false,
      showActivityDetail: false,
      showActivityForm: false,
      productList: [
        {
          title: "鲁B09800",
          desc: "10月会员礼",
          unfold: true,
          children: [
            {
              title: "玻璃水",
              time: "2022/10/1 18:30:28",
              shopName: "青岛汽车之家店铺",
              status: 0,
            },
            {
              title: "精美车饰",
              time: "2022/10/1 18:30:28",
              shopName: "青岛汽车之家店铺",
              status: 0,
            },
            {
              title: "玻璃水",
              time: "",
              shopName: "",
              status: 1,
            },
            {
              title: "玻璃水",
              time: "",
              shopName: "",
              status: 1,
            },
          ],
        },
        {
          title: "鲁B01000",
          desc: "10月会员礼",
          unfold: false,
          children: [
            {
              title: "玻璃水",
              time: "2022/10/1 18:30:28",
              shopName: "青岛汽车之家店铺",
              status: 0,
            },
            {
              title: "精美车饰",
              time: "2022/10/1 18:30:28",
              shopName: "青岛汽车之家店铺",
              status: 0,
            },
            {
              title: "玻璃水",
              time: "",
              shopName: "",
              status: 0,
            },
          ],
        },
        {
          title: "鲁B01000",
          desc: "10月会员礼",
          unfold: false,
          children: [],
        },
      ],
      showForm: false,
      showDet: null,
      showQrcode: false,
      showRule: false,
      showRepost: false,
      gzhUrl: "www.baidu.com",
      vipData: [],
      vipInfo: {},
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      taskList: [],
      totalIntegral: 0,
      taskName: [
        {
          noFinish: "去关注",
          finish: "已关注",
        },
        {
          noFinish: "去完善",
          finish: "已完善",
        },
        {
          noFinish: "去完成",
          finish: "已完成",
        },
        {
          noFinish: "去发布",
          finish: "已发布",
        },
        {
          noFinish: "去完成",
          finish: "已完成",
        },
        {
          noFinish: "去完成",
          finish: "已完成",
        },
        {
          noFinish: "去发布",
          finish: "已发布",
        },
      ],

      index1: -2,
      index11: 0,
      index22: -1,
      years: "",
      yearsList: [],
      detailsData: {},
      dataList: [],
      dateList: [],
      showDetMonth: "",
      showDetailsBox: false,
      total: [],
      psg: [],
      value1: "",
      value2: "",
      dayDetailsList: [],
      monthList: [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
      ],
      index2: 0,
      levelList: [
        {
          name: "青铜",
          img: "https://pic.bangbangtongcheng.com/static/qt01.png",
          bgm: require("@/assets/v3/viplevel1.png"),
        },
        {
          name: "白银",
          img: "https://pic.bangbangtongcheng.com/static/by01.png",
          bgm: require("@/assets/v3/viplevel2.png"),
        },
        {
          name: "黄金",
          img: "https://pic.bangbangtongcheng.com/static/hj01.png",
          bgm: require("@/assets/v3/viplevel3.png"),
        },
        {
          name: "铂金",
          img: "https://pic.bangbangtongcheng.com/static/bj01.png",
          bgm: require("@/assets/v3/viplevel4.png"),
        },
        {
          name: "钻石",
          img: "https://pic.bangbangtongcheng.com/static/zs01.png",
          bgm: require("@/assets/v3/viplevel5.png"),
        },
        {
          name: "钻石I",
          img: "https://pic.bangbangtongcheng.com/static/zsI01.png",
          bgm: require("@/assets/v3/viplevel6.png"),
        },
        {
          name: "钻石II",
          img: "https://pic.bangbangtongcheng.com/static/zsII01.png",
          bgm: require("@/assets/v3/viplevel7.png"),
        },
        {
          name: "钻石III",
          img: "https://pic.bangbangtongcheng.com/static/zsIII01.png",
          bgm: require("@/assets/v3/viplevel8.png"),
        },
        {
          name: "王者",
          img: "https://pic.bangbangtongcheng.com/static/wz01.png",
          bgm: require("@/assets/v3/viplevel9.png"),
        },
      ],
      hight: "",
      textOpacity: {
        opacity: 0.9,
      },
      colors: [
        {
          bgColor: "#45897E",
          wordColor: "#45897E",
          lineColor: "#45897E",
          bgColor2: "#DCEDEB",
          level: "青铜会员",
        },
        {
          bgColor: "#667E9B",
          wordColor: "#667E9B",
          lineColor: "#667E9B",
          bgColor2: "#DCDCDC",
          level: "白银会员",
        },
        {
          bgColor: "#7C552E",
          wordColor: "#7C552E",
          lineColor: "#7C552E",
          bgColor2: "#EBD5B6",
          level: "黄金会员",
        },
        {
          bgColor: "#4088A6",
          wordColor: "#4088A6",
          lineColor: "#4088A6",
          bgColor2: "#C7E8ED",
          level: "铂金会员",
        },
        {
          bgColor: "#4493DB",
          wordColor: "#4493DB",
          lineColor: "#4493DB",
          bgColor2: "#D9ECFC",

          level: "钻石会员",
        },
        {
          bgColor: "#517BC6",
          wordColor: "#517BC6",
          lineColor: "#517BC6",
          bgColor2: "#DAE6FE",

          level: "钻石Ⅰ会员",
        },
        {
          bgColor: "#5277CD",
          wordColor: "#5277CD",
          lineColor: "#5277CD",
          bgColor2: "#CCDBF7",

          level: "钻石Ⅱ会员",
        },
        {
          bgColor: "#3D52C2",
          wordColor: "#3D52C2",
          lineColor: "#3D52C2",
          bgColor2: "#C9D1F8",
          level: "钻石Ⅲ会员",
        },
        {
          bgColor: "#822C98",
          wordColor: "#822C98",
          lineColor: "#822C98",
          bgColor2: "#DEC6F0",
          level: "王者会员",
        },
      ],
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          background: "",
          opacity: 1,
          size: "4px",
          specifyBorderRadius: false,
          gutterOfEnds: null, //轨道距 x 和 y 轴两端的距离
          gutterOfSide: "0", //距离容器的距离
          keepShow: false, //是否即使 bar 不存在的情况下也保持显示
          border: "#F8F8F8", //边框
        },
        bar: {
          hoverStyle: true,
          size: "4px",
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#64B6A8", //颜色
        },
      },

      loginstate: false,
      user: {},

      membersCollectList: [],
      receivRecordList: [],
      licensePlateList: [],
      licensePlateList2: [],
      taskIndex: 2,
      vehicleIndex: 1,
      aboutList: [], //活动中心列表
      aboutData: {
        eventGifts: [],
        activityDescription: "",
      }, //当前活动详情
      curActivity: {}, // 当前活动
      giftData: {}, // 当前活动奖品 改造后
      LiPing: {}, // 当前活动奖品 改造前
      CST: 0, //拥有豆子总数
      numT: 1,
      giftChage: 0,

      duihuanMethods: 0, //兑换方式
      codeImage: "", //兑换二维码图
      integralTotal2: 0,
      giftKey: {},
    };
  },
  mounted() {
    setTimeout(() => {
      // this.$refs.masks.open('cmembership1')
    }, 50);
    console.log(this.index1);
  },
  created() {
    this.getUser();

    // this.$msgBox.showMsgBox({
    //           title:'解除绑定',
    //           content: '确定要解绑车牌号鲁B 88088？',

    //       }).then(async (val) => {
    //           console.log(val);
    //       }).catch((err) => {
    //           console.log(err);
    //       });

    if (
      this.$route.query.from == "popup" &&
      this.user &&
      this.user.merchantId &&
      this.$route.query.movementNo
    ) {
      this.$getHttp("/api/mobile/vehicleOwner/getGiftInventoryByMerchantsId", {
        merchantsId: Number(this.userInfo.merchantId),
        pageNo: 1,
        pageSize: 99,
      }).then((res) => {
        this.beMerchantPageStatus = false;
        this.taskIndex = 2;
        this.merchantStatusActive = 3;

        this.giftInventoryByMerchantsId = res.giftsForRecords.pageList || [];
        this.merchantRecordDetail = true;
        this.curGift3 =
          this.giftInventoryByMerchantsId.filter(
            (item) => item.movementNo == this.$route.query.movementNo
          )[0] || {};
      });
    }
  },

  computed: {
    frontTotalNum() {
      return Math.ceil(
        (this.curGift3.giftInfoList || []).length / this.frondendPager.pageSize
      );
    },
    curFrontList() {
      return (this.curGift3.giftInfoList || [])
        .filter((item) => item.sendNumber)
        .slice(
          (this.frondendPager.pageNo - 1) * this.frondendPager.pageSize,
          this.frondendPager.pageNo * this.frondendPager.pageSize
        );
    },
    getIconForTitle() {
      return (title) => {
        if (title == "发布帮友圈") {
          return require("@/assets/v3/vip7.png");
        } else if (title == "点赞") {
          return require("@/assets/v3/vip6.png");
        } else if (title == "关注公众号") {
          return require("@/assets/v3/vip1.png");
        } else if (title == "发布") {
          return require("@/assets/v3/vip4.png");
        } else if (title == "关注/收藏") {
          return require("@/assets/v3/vip5.png");
        } else if (title == "完善资料") {
          return require("@/assets/v3/vip2.png");
        } else if (title == "转发") {
          return require("@/assets/v3/vip3.png");
        }
      };
    },

    // 去除字符
    titleReplace(item) {
      return function (item) {
        // console.log(item);
        let title = item.replace("会员", "");
        return title;
      };
    },
  },
  methods: {
    // 新的获取数据方式
    getDataNew() {
      if (this.isMerchantStatus) {
        // 商家身份
        if (this.merchantStatusActive == 1) {
          this.merchantDetail = false;
          this.newPager1 = {
            pageNo: 1,
            pageSize: 5,
          };
          this.newPager2 = {
            pageNo: 1,
            pageSize: 5,
          };
          this.merchantValue = "-1";
          this.merchantValue2 = "";

          this.giftInventory();
          this.giftsMerchants();
        }
        if (this.merchantStatusActive == 3) {
          this.merchantRecordDetail = false;
          this.newPager1 = {
            pageNo: 1,
            pageSize: 5,
          };
          this.getGiftInventoryByMerchantsId();
        }
        if (this.merchantStatusActive == 2) {
          this.getEmployees();
        }
      } else {
        // 普通人
      }
    },
    change11(value) {
      this.newPager2.pageNo = 1;
      if (value == -1) {
        this.giftsMerchants();
        this.merchantDetail = false;
        this.merchantValue2 = "";
      } else if (value == -2) {
        // this.merchantDetail = false
        // this.merchantValue2 = ""
        // this.giftInformationList = this.giftInformationList.filter(item=>!item.id)
        this.selectGift(
          this.giftInformationList.filter((item) => item.giftId == value)[0] ||
            {}
        );
      } else {
        console.log(
          "11",
          value,
          this.merchantOptions.filter((item) => item.giftId == value)
        );
        this.selectGift(
          this.giftInformationList.filter((item) => item.giftId == value)[0] ||
            {},
          true
        );

        // this.giftsMerchantsRecords();
      }
    },
    change22(value) {
      this.newPager2.pageNo = 1;

      if (this.merchantValue == -1) {
      } else {
        this.selectGift(
          this.giftInformationList.filter(
            (item) => item.giftId == this.merchantValue
          )[0] || {},
          true
        );
      }
    },
    beMerchantPage() {
      this.$getHttp("/mob/user/getApplicationRecords", {
        userId: this.userInfo.id,
      }).then((res) => {
        // this.aboutList = res.activityCenterTabulation.pageList
        this.tempMerchantStatus = res.record && res.record.auditStatus != 1;
        this.becomeLoading = false;
        this.showStatus = true;
      });
    },
    become() {
      console.log("我要加入");
      //申请成为车会员商家
      if (this.becomeLoading) {
        return;
      }
      this.becomeLoading = true;
      this.$postHttp("/api/mobile/vehicleOwner/applyToBeMerchants", {
        userId: this.user.id,
      }).then((res) => {
        console.log(res);
        this.beMerchantPageStatus = false;
        this.mySuccessMessage("申请已提交，请您耐心等待平台回访");
        this.beMerchantPage();
      });
    },
    // 获取礼品库存
    giftInventory() {
      let that = this;
      // this.$getHttp("/api/mobile/vehicleOwner/getGiftInventory", {
      //   merchantId: this.user.merchantId,
      // }).then((res) => {
      //   this.giftInventoryList = res.merchantGiftDistribution.pageList;
      // });
    },
    async giftsMerchants() {
      var record = {};
      await this.$getHttp("/api/mobile/vehicleOwner/getQrCodeBindInfo", {
        merchantId: this.userInfo.merchantId,
      }).then((res) => {
        record = res.record;
        this.qrRecord = res.record;
      });

      this.$getHttp("/api/mobile/vehicleOwner/getAllGiftLists", {
        merchantId: this.user.merchantId,
        type: +this.merchantValue + 1,
        ...this.newPager1,
        pageSize: 99,
      }).then((res) => {
        this.giftInformationList = [
          {
            id: 100000000,
            giftId: -2,
            ...record,
            giftInformation: {
              giftName: "二维码",
            },
          },
          ...res.GiftLists.pageList.filter((item) => item.giftId !== "null"),
        ];
        this.merchantOptions = [
          {
            value: "-1",
            label: "全部礼品",
          },
        ];
        this.merchantOptions.push(
          ...this.giftInformationList
            .filter((item) => item.giftInformation)
            .map((item) => {
              return {
                value: item.giftId,
                label: item.giftInformation.giftName,
              };
            })
        );
      });
    },
    // 获取商家礼品发放记录列表
    giftsMerchantsRecords() {
      let that = this;
      // this.giftDistributionRecord = []
      this.merchantDetail = true;
      if (this.merchantValue == -2) {
        this.$getHttp(
          "/api/mobile/vehicleOwner/getMerchantQrCodeBindingRecord",
          {
            merchantId: this.user.merchantId,
            timeRange: this.merchantValue2,
            ...this.newPager2,
          }
        ).then((res) => {
          this.giftDistributionRecord = res.record.pageList || [];
          this.newTotal2 = res.record.pageCount;
        });
      } else {
        this.$getHttp("/api/mobile/vehicleOwner/getGiftDistributionRecords", {
          merchantId: this.user.merchantId,
          giftId: this.merchantValue,
          timeRange: this.merchantValue2,
          ...this.newPager2,
        }).then((res) => {
          this.giftDistributionRecord =
            res.GiftDistributionRecord.pageList || [];
          this.newTotal2 = res.GiftDistributionRecord.pageCount;
        });
      }
    },
    CollectCurrentChange3(e) {
      this.merchantRecordDetail = false;
      this.newPager1.pageNo = e;
      this.getGiftInventoryByMerchantsId();
    },
    CollectCurrentChange2(e) {
      this.merchantDetail = false;
      this.newPager2.pageNo = e;
      this.giftsMerchantsRecords();
    },
    confirm3(flag) {
      var param = {
        movementNo: this.curGift3.movementNo,
        merchantsId: this.curGift3.merchantId,
        state: this.curGift3.type,
        confirmStatus: this.curGift3.confirmStatus,
        giftList: this.curGift3.giftInfoList.map((item) => {
          return {
            giftId: item.id,
            number: item.sendNumber,
          };
        }),
      };
      if (flag) {
        //确认
        param.confirmStatus = 1;
      } else {
        //拒绝
        param.confirmStatus = 2;
      }
      if (this.confirmLoading) {
        return;
      }
      this.confirmLoading = true;

      this.$confirm(
        `是否要${flag ? "确定" : "拒绝"}${
          this.curGift3.type == 1 ? "收货" : "退货"
        }`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$postHttp(
            "/api/mobile/vehicleOwner/auditGiftForRecord",
            param,
            true,
            {
              contentType: "application/json",
            }
          ).then((res) => {
            console.log(res);
            this.getGiftInventoryByMerchantsId();
            this.mySuccessMessage(res.msg);
            this.merchantRecordDetail = false;
            this.openUrls("/my/vipCenterCopy");
          });
        })
        .catch(() => {
          this.confirmLoading = false;
        });

      console.log("param", param);
    },
    preV3() {
      if (this.frondendPager.pageNo > 1) {
        this.frondendPager.pageNo = this.frondendPager.pageNo - 1;
      }
      // console.log(this.curGift3.giftInfoList, this.frondendPager.pageNo)
    },
    nextV3() {
      if (
        this.frondendPager.pageNo <
        Math.ceil(
          (this.curGift3.giftInfoList || []).length /
            this.frondendPager.pageSize
        )
      )
        this.frondendPager.pageNo = this.frondendPager.pageNo + 1;
      // console.log(this.curGift3.giftInfoList, this.frondendPager.pageNo)
    },
    selectGift(item, flag) {
      console.log(item, "执行了selectGift");
      if (item.id) {
        this.curGift = item;
        // let obj =
        //   this.giftInventoryList.filter(
        //     (item) => this.curGift.id == item.id
        //   )[0] || {};
        this.curSend = this.curGift.sendTotal;
        this.curStock = this.curGift.stock;
        this.merchantValue = item.giftId;
        this.merchantDetail = true;
        this.modemode = "";
        this.newPager1.pageNo = 1;
        if (item.giftId == -2) {
          this.modemode = "2";
          this.curStock = this.qrRecord.unbound;
        }
        // if (flag) {
        this.giftsMerchantsRecords();

        // }
      }
    },
    selectGift32() {
      this.merchantRecordDetail = false;
    },
    selectGift3(item) {
      this.merchantRecordDetail = true;
      this.curGift3 = item;
    },
    // 出入库 列表
    getGiftInventoryByMerchantsId() {
      let that = this;
      this.$getHttp("/api/mobile/vehicleOwner/getGiftInventoryByMerchantsId", {
        merchantsId: this.user.merchantId,
        ...this.newPager1,
      }).then((res) => {
        // this.giftInventoryByMerchantsId = res.merchantGiftDistribution.pageList;
        this.confirmLoading = false;
        this.giftInventoryByMerchantsId = res.giftsForRecords.pageList || [];
        this.newTotal = res.giftsForRecords.pageCount;
      });
    },
    // 员工获取
    getEmployees() {
      let that = this;
      this.employeesList = [];
      this.$getHttp("/api/mobile/vehicleOwner/getMerchantStaffList", {
        merchantId: this.user.merchantId || 1,
      }).then((res) => {
        this.submitLoading = false;
        res.merchantStaffs.forEach((v) => {
          v.active = false;
        });
        this.employeesLoading = false;
        this.employeesList = res.merchantStaffs;
        this.merchantStatusActiveManage = false;
      });
    },
    // 员工管理
    merchantOperate(row) {
      if (row) {
        // 删除
        // var idsArr = this.employeesList.filter(item => item.active).map(item => item.id)
        // if (idsArr.length <= 0) {
        //   this.myErrorMessage('请至少选择一个')
        //   return false
        // }
        let that = this;
        if (this.employeesLoading) {
          return false;
        }
        this.$confirm("此操作将删除会员, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.employeesLoading = true;
            that
              .$postHttp("/api/mobile/vehicleOwner/deleteEmployeeByIds", {
                ids: row.id,
              })
              .then((res) => {
                that.mySuccessMessage(res.msg);
                that.getEmployees();
              });
          })
          .catch(() => {});
      } else {
        // 新增
        if (this.employeesList.length >= 5) {
          this.myErrorMessage("最多只能添加5名员工！");
          return;
        }
        this.$bus.$off("getEmployeesRe");
        this.$bus.$on("getEmployeesRe", () => {
          this.getEmployees();
        });

        this.$refs.membershipManagement.open();
      }
    },
    // 是商家 切换管理
    changeMerchantStatusActiveManage() {
      this.merchantStatusActiveManage = !this.merchantStatusActiveManage;
      // 清空选择操作

      // 清空当前弹窗
    },

    // 是商家 总切换
    changeMerchantStatus(status) {
      this.merchantStatusActive = status;

      this.getDataNew();
    },
    getTaskName(label) {
      if (label.indexOf("关注") > -1) {
        return {
          noFinish: "去关注",
          finish: "已关注",
        };
      }
      if (label.indexOf("完善") > -1) {
        return {
          noFinish: "去完善",
          finish: "已完善",
        };
      }
      return {
        noFinish: "去完成",
        finish: "已完成",
      };
    },
    changeDuihuanMethods(Mi) {
      console.log(
        "this.giftKey.exchangeMethod",
        this.giftKey.exchangeMethod,
        Mi
      );
      Mi = Mi == 1 ? 2 : 1;
      if ((this.giftKey.exchangeMethod || "").indexOf(Mi) > -1) {
        this.duihuanMethods = Mi == 1 ? 2 : 1;
      }
    },
    // 商家礼品存档
    async giftKeep(obj) {
      let index = "";
      await this.$postHttp("/api/mobile/public/addExchangeRecords", obj).then(
        (res) => {
          index = res.ExchangeRecordsId;
        }
      );
      return index;
    },
    // 去兑换
    async goduihuan() {
      if (
        this.giftKey.exchangeMethod == 1 ||
        this.giftKey.exchangeMethod.indexOf(",") > -1
      ) {
        var id = await this.giftKeep(this.giftKey);
        // 当有这个id时，必定是线下扫码兑换
        this.duihuanMethods = 2;
        this.showActivityDetail = false;
        // 获取礼品二维码
        this.$getHttp("/api/mobile/public/getClaimQRCode", {
          exchangeRecordsId: id,
          userId: this.userInfo.id,
          giftId: this.giftKey.giftId,
          colour: 1,
          width: 540,
          height: 540,
        }).then((res) => {
          this.codeImage = res.codeImages;
        });
        this.goDui();
        console.log("扫码");
        // uni.navigateTo({
        // 	url: "/pages_my/exchangeMethod?giftId=" + this.giftId + '&id='+id
        // })
      } else {
        console.log("邮寄");
        this.goDui();
        // 邮寄吧
        this.duihuanMethods = 1;
        // uni.setStorageSync('yjlp_key', this.giftKey);
        // uni.navigateTo({
        // 	url: "/pages_my/exchangeMethod"
        // })
      }
    },
    // 兑换不了的
    tips() {
      console.log("111");
      if (
        this.aboutData.activityProgressBar.indexOf("%") > -1 &&
        +this.aboutData.activityProgressBar.split("%")[0] >= 100
      ) {
        this.mySuccessMessage("已兑换礼品，敬请关注下次活动！");
      } else {
        this.mySuccessMessage("您的任务还未完成，无法兑换！");
      }
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      // await this.getMultiple()
      if (user != null) {
        this.loginstate = true;
        this.user = user;
        this.userInfo = user;
        this.isMerchantStatus = !!user.merchantId;

        this.getVip();
        this.gzhUrl =
          "https://www.bangbangtongcheng.com/conven/login/Wxlogin.do?userId=" +
          this.userInfo.id;

        this.$getHttp("/mob/login/getUserInfoByPhone", {
          phone: this.user.phone,
        }).then((res) => {
          this.integralTotal2 =
            Number(res.userInfo.integral) -
            Number(res.userInfo.accumulatedUsageIntegral);
        });
        this.getTaskList();
        this.addDate();
        this.getTask();
        this.selectVehicleIndex(1);
        this.getDataNew();
        this.$nextTick(() => {});
        let url = this.gzhUrl;
        setTimeout(() => {
          let qr = new QRCode(this.$refs.qrCodeDiv, {
            text: url,
            width: 200,
            height: 200,
          });
        });
      } else {
        this.loginstate = false;
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        this.$router.push("/");
      }
    },
    goDui() {
      this.showActivityForm = true;
      this.showActivity = false;
      this.showActivityDetail = false;
    },
    backDui() {
      this.activetyMore(true);
      this.showActivityDetail = false;
      this.showActivityForm = false;
      this.showActivity = true;
    },
    async duihuan(item) {
      console.log("itemitem", item);
      const confirmRes = await this.$confirm(item.giftName, "确认兑换", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err); //用catch来捕获错误消息

      //用户单击确认，返回值为字符串confirm; 单击取消，返回值为字符串cancel
      if ("cancel" === confirmRes) {
        //用户点击了取消
      }
      if ("confirm" === confirmRes) {
        //用户点击了确认
        // 判断礼品以何种方式发放
        let index = "";
        // 商家礼品存档id
        let id = "";
        this.aboutData.eventMerchantGifts.forEach((v) => {
          if (v.giftId == item.id) {
            // 1为扫码领取，2为邮寄
            // 2 个 可以同时都有
            index = v.collectionMethod;
          }
        });
        let obj = {};
        obj = {
          userId: this.userInfo.id,
          giftId: item.id,
          giftName: item.giftName,
          giftImage: item.giftPicture,
          activityName: this.aboutData.activityTitle,
          exchangeMethod: index,
        };
        this.giftKey = obj;

        this.goduihuan();

        this.goDui();
        // this.showActivityDetail = true;
        // this.showActivity = false;
      }
    },
    // 进入一个活动
    activetyMore(flag = false) {
      this.$getHttp("/api/mobile/public/getActivityCenterDetails", {
        id: this.curActivity.id,
        userId: this.user.id,
      }).then((res) => {
        // 判断是否有已兑换的商品
        if (res.activityCenterDetails.eventGifts.length) {
          res.activityCenterDetails.eventGifts.forEach((v) => {
            if (v.redemptionStatus == "已兑换") {
              this.giftChage = 1;
            }
          });
        }
        this.aboutData = res.activityCenterDetails;
        // 视图显示
        if (!flag) {
          this.showDetailsBox = !this.showDetailsBox;
          this.showActivity = true;
        }
      });
    },
    // 进入一个活动的一个奖品详情
    activetyPrizeMore(item) {
      // 判断礼品以何种方式发放
      let index = "";
      // 商家礼品存档id
      let id = "";
      this.aboutData.eventMerchantGifts.forEach((v) => {
        if (v.giftId == item.id) {
          // 1为扫码领取，2为邮寄
          index = v.collectionMethod;
        }
      });
      let obj = {};
      obj = {
        userId: this.userInfo.id,
        giftId: item.id,
        giftName: item.giftName,
        giftImage: item.giftPicture,
        activityName: this.aboutData.activityTitle,
        exchangeMethod: index,
      };
      this.giftKey = obj;

      this.$getHttp("/api/mobile/public/getEventGiftsDetails", {
        id: obj.giftId,
      }).then((res) => {
        this.giftData = res.eventGiftsDetails;

        this.showActivityDetail = true; //活动奖品详情
        this.showActivity = false; //活动详情
        this.showActivityForm = false; //兑换表单
      });
    },

    openFeedback() {
      this.$refs.feedback.open();
    },
    click(item, i) {
      console.log(item);
      this.loadProductList(i);
      return;
      this.productList.map((item, index) => {
        if (index == i) {
          item.unfold = !item.unfold;
        } else {
          item.unfold = false;
        }
      });
    },
    async loadProductList(i) {
      if (this.productList[i].children.length == 0) {
        let data = {
          years: this.date,
          licensePlateNumber:
            this.licensePlateList2[i] &&
            this.licensePlateList2[i].licensePlateNumber,
        };
        console.log(data);
        await this.$getHttp(
          "/api/mobile/vehicleOwner/getReceiveRecordByLicensePlateNumber",
          data
        ).then((res) => {
          this.productList[i].children = res.giftReceiveRecord.pageList.map(
            (i, j) => {
              return {
                image: i.giftPicture,
                title: i.giftName,
                time: i.recordTime,
                shopName: i.merchantInformation.merchantName,
                status: 1,
              };
            }
          );
          // this.productList=arr
        });
      }
      this.productList.map((item, index) => {
        if (index == i) {
          item.unfold = !item.unfold;
        } else {
          item.unfold = false;
        }
      });
    },
    noRepeat1(arr) {
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].monthContent == arr[j].monthContent) {
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    // 总tab
    leibieClick(i) {
      this.beMerchantPageStatus = false;
      this.taskIndex = i;
      if (i == 3) {
        // 活动中心
        this.$getHttp("/api/mobile/public/getActivityCenterTabulation").then(
          (res) => {
            this.aboutList = res.activityCenterTabulation.pageList;
          }
        );
      }
    },
    //  车系title
    selectVehicleIndex(i) {
      this.vehicleIndex = i;
      if (i == 1) {
        this.membersCollect();
      } else if (i == 2) {
        this.receivRecords();
      } else {
        this.licensePlate();
      }
    },
    // 车牌号列表
    licensePlate() {
      this.$getHttp(
        "/api/mobile/vehicleOwner/getLicensePlateNumberListByUserId",
        {
          userId: this.userInfo.id,
          deleteFlag: 0,
        }
      ).then((res) => {
        this.licensePlateList = res.LicensePlateNumberList.pageList;
        this.licensePlateLoading = false;
      });
    },
    async vehicleClick(type, item, index) {
      let that = this;
      if (type == 1) {
        //去领取
        if (item.receiveContent != "去领取") {
          return;
        }
        this.$msgBox
          .showMsgBox({
            content: "请打开手机端进行操作",
            isShowCancelBtn: false,
            mode: 1,
          })
          .then(async (val) => {
            console.log(val);
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (type == 2) {
        //查看明细

        var arr = [];

        // 车辆数据
        var res = await this.$getHttp(
          "/api/mobile/vehicleOwner/getLicensePlateNumberListByUserId",
          {
            userId: this.userInfo.id,
            deleteFlag: 0,
          }
        );
        var licensePlateList = res.LicensePlateNumberList.pageList;
        // 如果没绑定车
        if (!licensePlateList[0]) return;

        arr = licensePlateList.map((item2, index) => {
          return {
            id: item2.id,
            codeId: item2.codeId,
            cellphoneNumber: item2.cellphoneNumber,
            licensePlateNumber: item2.licensePlateNumber,
            licensePlatePhoto: item2.licensePlatePhoto,
            title: item2.licensePlateNumber,
            desc: item.monthContent,
            children: [],
            unfold: index == 0 ? true : false,
          };
        });
        this.date = item.yearContent + "-" + item.monthContent.split("月")[0];
        this.licensePlateList2 = licensePlateList;
        let data = {
          years: item.yearContent + "-" + item.monthContent.split("月")[0],
          licensePlateNumber: licensePlateList[0].licensePlateNumber,
        };
        await this.$getHttp(
          "/api/mobile/vehicleOwner/getReceiveRecordByLicensePlateNumber",
          data
        ).then((res) => {
          arr[0].children = res.giftReceiveRecord.pageList.map((i, j) => {
            return {
              image: i.giftPicture,
              title: i.giftName,
              time: i.recordTime,
              shopName: i.merchantInformation.merchantName,
              status: 1,
            };
          });
          this.showForm = true;
          this.productList = arr;
          console.log(this.productList);
        });
      } else if (type == 3) {
        //解除绑定
        this.$msgBox
          .showMsgBox({
            title: "解除绑定",
            content: `确定要解绑车牌号${item.licensePlateNumber}？`,
          })
          .then(async (val) => {
            if (val == "confirm") {
              if (this.licensePlateLoading) return;
              this.licensePlateLoading = true;
              that
                .$postHttp("/api/mobile/vehicleOwner/relieveBind", {
                  id: item.id,
                  userId: this.userInfo.id,
                })
                .then((res) => {
                  that.mySuccessMessage(res.msg);
                  that.licensePlate();
                });
            }
            console.log(val);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 打开明细
    openDet(item, i, index) {
      // 如果是打赏

      this.dayDetailsList = [];
      if (this.showDet == index) {
        this.showDet = -1;
        return;
      }
      this.showDet = index;
      this.showDetMonth = item;
      this.getDayDetails(item, i);
    },

    // 转换时间
    async addDate() {
      let nowDate = new Date();
      let date = {
        year: nowDate.getFullYear(),
        month:
          nowDate.getMonth() + 1 < 10
            ? "0" + (nowDate.getMonth() + 1)
            : nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      };
      // this.systemTime = date.year + '-' + date.month + '-' + date.date
      this.value1 = date.year;
      this.value2 = date.month.toString();
      console.log(this.value2);
      // this.month = "date.month";
      for (let i = 0; i < 10; i++) {
        this.yearsList.push(this.value1 * 1 - i);
      }
      await this.getDetails();
    },

    // 获取全年明细
    async getDetails() {
      await this.$getHttp("/mob/iteration/selectIntegralByYear", {
        userId: this.userInfo.id,
        year: this.value1,
      }).then((res) => {
        let data1 = [
          ...(res.RewardIncomeRecords || []).map((item) => {
            return {
              ...item,
              id: "sr" + item.id,
              integral: item.rewardQuantity,
              number: "n",
              unit: 1,
              title: item.title,
              realTitle: item.title,
              realIntegral: item.rewardQuantity * 1,
              date: item.createDate.slice(0, 7),
            };
          }),
          ...(res.RewardExpenditureRecords || []).map((item) => {
            return {
              ...item,
              id: "zc" + item.id,
              integral: item.rewardQuantity,
              number: "n",
              unit: -1,
              title: item.title,
              realTitle: item.title,
              realIntegral: item.rewardQuantity * -1,
              date: item.createDate.slice(0, 7),
            };
          }),
        ].sort(function (a, b) {
          // return a.title<b.title?1:-1;
          return new Date(a.rewardTime) < new Date(b.rewardTime) ? 1 : -1;
        });
        this.data1 = JSON.parse(JSON.stringify(data1));
        let data2 = [
          ...new Set(
            data1.filter((item) => item.date).map((item) => item.date)
          ),
        ];
        let data3 = [];
        data2.map((date) => {
          data3.push({
            id: null,
            number: "n",
            title: "打赏明细",
            integral: data1
              .filter((item) => item.date == date)
              .map((item) => item.integral * item.unit)
              .reduce((preV, curV) => {
                return preV + curV;
              }),
            date,
          });
        });
        console.log("dateListdateListdateList", data2);
        console.log("dateListdateListdateList", data3);

        let data = {};
        this.dataList = [];
        [...res.recordList, ...data3].forEach((el) => {
          if (!Array.isArray(data[el.date])) {
            data[el.date] = [];
            data[el.date].push(el);
          } else {
            data[el.date].push(el);
          }
        });

        this.detailsData = data;
        let num = [];
        for (let i in this.detailsData) {
          let all = 0;
          this.dataList.push(this.detailsData[i]);
          this.dateList.push(i);
          this.detailsData[i].forEach((el) => {
            all += el.integral;
            if (el.title.includes("关注/") || el.title.includes("收藏")) {
              el.title = "关注/收藏(楼盘、门店、用户、房源、看点)";
            }
          });
          num.push(all.toString());
        }
        console.log("this.totalthis.total", num);
        this.total = num;
      });
    },
    // 获取某个月明细
    getDayDetails(mm, num) {
      let month = mm;
      let number = 0;
      // if (num == "关注公众号") {
      //   number = 1;
      // } else if (num == "完善信息" || num == "完善资料") {
      //   number = 2;
      // } else if (num == "转发房源" || num == "") {
      //   number = 3;
      // } else if (num == "发布房源") {
      //   number = 4;
      // } else if (num.includes("关注") || num.includes("收藏")) {
      //   number = 5;
      // }

      // 如果是打赏
      if (num == "n") {
        this.dayDetailsList = this.data1.filter((item2) => {
          return item2.date == mm;
        });
        console.log(
          "this.dayDetailsListthis.dayDetailsList",
          this.dayDetailsList
        );
        return;
      }
      this.$getHttp("/mob/iteration/selectIntegralByMonth", {
        userId: this.userInfo.id,
        month,
        number: num,
      }).then((res) => {
        this.dayDetailsList = res.recordList;
      });
    },
    // 获取任务数据
    getTask() {
      this.$postHttp("/mob/iteration/getClubInfo", {
        userId: this.userInfo.id,
      }).then((res) => {
        // this.vipData = res.userInfo;
        this.CST = res.taskList
          .map((item) => Number(item.CS))
          .reduce(function (preV, curV) {
            return preV + curV;
          });
        this.numT = res.taskList
          .map((item) => Number(item.num))
          .reduce(function (preV, curV) {
            return preV + curV;
          });
        console.log("this.CST", this.CST, this.numT);
        this.taskList = res.taskList;
        this.totalIntegral = 0;
        this.taskList.forEach((el) => {
          this.totalIntegral += (el.num - el.CS) * el.integral;
        });
      });
    },
    // 获取用户会员数据
    getVip() {
      this.$getHttp("/mob/login/getUserInfoByPhone", {
        phone: this.userInfo.phone,
      }).then((res) => {
        this.vipInfo = res.userInfo;
        this.index1 = res.userInfo.memberLevel - 1;
        this.index2 = res.userInfo.memberLevel - 1;
      });
    },
    // 获取会员列表
    getTaskList() {
      this.$getHttp("/mob/iteration/getMemberConfigList", {
        userId: this.userInfo.id,
      }).then((res) => {
        this.vipData = res.data;
        // this.psg = this.vipData.map(el => {
        //   let pecg = ((this.vipInfo.integral * 1) / (el.inteOver* 1)) * 100;
        //   if (pecg > 100) {
        //     pecg = 100;
        //   }
        //   return pecg;
        // });
        res.data.forEach((el) => {
          let pecg = ((this.userInfo.integral * 1) / (el.inteOver * 1)) * 100;
          if (pecg > 100) {
            pecg = 100;
            this.psg.push(pecg);
          } else {
            this.psg.push(pecg);
          }
        });
        setTimeout(() => {
          var swiper1 = new Swiper(".swiper-container", {
            // loop: true,
            autoplay: 3000,
            speed: 500,
            height: 380,
            initialSlide: this.index1,
            autoplayDisableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay // loop: true,
            centeredSlides: true,
            controller: {
              control: swiper2,
            },
            slidesPerView: "auto",
            pagination: ".swiper-pagination",
            paginationClickable: true, //点击分页器是否会切换
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swipe
            navigation: {
              nextEl: ".button-next",
              prevEl: ".button-prev",
            },
          });

          let swiper2 = new Swiper(".swiper-container1", {
            // loop: true,
            autoplay: 3000,
            speed: 500,
            initialSlide: this.index1,
            controller: {
              control: swiper1,
            },
            height: 50,
            autoplayDisableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay // loop: true,
            centeredSlides: true,
            slidesPerView: "auto",
            paginationClickable: true, //点击分页器是否会切换
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swipe

            onSlideChangeEnd: function (swiperHere) {
              console.log("===索引值：" + swiperHere.activeIndex);
            },
            on: {
              slideChange() {
                // vm.activeSlide = this.activeIndex
                console.log(this.activeIndex);
              },
            },
          });
          swiper1.controller.control = swiper2;
        }, 100);
      });
    },
    // 选择月份
    monthClick(val) {
      console.log(this.value2);
    },
    // 选择年份
    yearClick(val) {
      this.getDetails();
    },
    // 去完成按钮
    goFinish(num) {
      if (num == 1) {
        this.showQrcode = true;
      } else if (num == 2) {
        this.$router.push("/my/bbcz/bbczpersonal?type=personal");
      } else if (num == 3) {
        this.showRepost = true;
      } else if (num == 4) {
        this.$refs.heads.toRouter(1);
        // console.log(this.$refs);
        // this.$router.push("./isshouse");
      } else if (num == 6) {
        this.$router.push("/index/friendsCircle");
      } else if (num == 7) {
        this.$router.push("/release/releaseCircleFriends");
      } else {
        this.$router.push("/");
      }
    },
    // 获取待领取会员礼列表
    membersCollect() {
      this.$getHttp("/api/mobile/vehicleOwner/getMemberGiftReceived", {
        userId: this.userInfo.id,
      }).then((res) => {
        var ymList = [
          ...this.loopYear(new Date().getFullYear() - 1),
          ...this.loopYear(new Date().getFullYear()),
          ...this.loopYear(new Date().getFullYear() + 1),
        ];
        var i = ymList.findIndex((item) => item == this.getYearMonth());
        var yearRange = ymList.slice(i - 1, i + 2);
        // console.log("yearRange", ymList, i, yearRange);

        var curInfo = res.giftInformationList.pageList.filter(
          (item) => item.evdate == yearRange[1]
        );
        var curInfo1 = res.giftInformationList.pageList.filter(
          (item) => item.evdate == yearRange[0]
        );
        var curInfo2 = res.giftInformationList.pageList.filter(
          (item) => item.evdate == yearRange[2]
        );
        if (curInfo1[0]) {
          curInfo1[0].receiveContent = "已过期";
        }
        if (curInfo[0]) {
          curInfo[0].receiveContent = "去领取";
        }
        if (curInfo2[0]) {
          curInfo2[0].receiveContent = "未生效";
        }

        console.log(res.giftInformationList.pageList, curInfo, ymList);
        if (
          curInfo[0] &&
          Number(curInfo[0].proportionReceiving.split("/")[1]) &&
          Number(curInfo[0].proportionReceiving.split("/")[1]) == 1
        ) {
          this.$getHttp(
            "/api/mobile/vehicleOwner/getLicensePlateNumberListByUserId",
            {
              userId: this.userInfo.id,
              deleteFlag: 0,
            }
          ).then((res1) => {
            var licensePlateList = res1.LicensePlateNumberList.pageList;
            this.$getHttp(
              "/api/mobile/vehicleOwner/getUnclaimedGiftInformation",
              {
                licensePlateNumber: licensePlateList[0].licensePlateNumber,
                months: this.months || 1,
              }
            ).then(async (res2) => {
              var list = res2.giftInformationList.pageList;
              var flag = false;
              var tempArr = [];
              var item = {};
              for (let i = 0; i < list.length; i++) {
                item = list[i];
                if (!flag) {
                  if (item.batch) {
                    tempArr.push(item.batch);
                    flag =
                      list
                        .filter((item2) => item2.batch == item.batch)
                        .filter((item2) => item2.whetherReceive == 1).length ==
                        0 &&
                      list
                        .filter((item2) => item2.batch == item.batch)
                        .filter(
                          (item2) =>
                            item2.whetherReceive != 1 &&
                            item2.whetherOverdue != 1 &&
                            item2.whetherAdvance != 1
                        ).length > 0;
                    // 1
                    console.log("flag", flag);
                  } else {
                    flag =
                      item.whetherReceive != 1 &&
                      item.whetherOverdue != 1 &&
                      item.whetherAdvance != 1;
                  }
                }
              }
              // console.log('flag',flag)
              curInfo[0].isEnable = flag;
              curInfo[0].receiveContent = flag ? "去领取" : "已领取";
              this.membersCollectList = res.giftInformationList.pageList.filter(
                (item) => yearRange.includes(item.evdate)
              );
              uni.hideLoading();
            });
          });
        } else {
          if (curInfo[0]) {
            curInfo[0].isEnable = false;
          }
          this.membersCollectList = res.giftInformationList.pageList.filter(
            (item) => yearRange.includes(item.evdate)
          );
        }

        // this.membersCollectList = res.giftInformationList.pageList.filter(
        //   (item) => yearRange.includes(item.evdate)
        // );
      });
    },
    loopYear(year) {
      let arr = [];
      for (let month = 0; month < 12; month++) {
        arr.push(this.getYearMonth(year, month));
      }
      return arr;
    },
    getYearMonth(year, month) {
      if (!year) {
        var dt = new Date();
      } else {
        var dt = new Date(year, month);
      }
      var yy1 = dt.getFullYear();
      var mm1 = dt.getMonth() + 1;
      var dd1 = dt.getDate();
      if (mm1 < 10) {
        mm1 = "0" + mm1;
      }
      if (dd1 < 10) {
        dd1 = "0" + dd1;
      }
      return yy1 + "-" + mm1;
    },
    // 车牌号列表
    licensePlate() {
      this.$getHttp(
        "/api/mobile/vehicleOwner/getLicensePlateNumberListByUserId",
        {
          userId: this.userInfo.id,
          deleteFlag: 0,
        }
      ).then((res) => {
        this.licensePlateList = res.LicensePlateNumberList.pageList;
        this.licensePlateLoading = false;
      });
    },
    // 获取车会员领取记录
    receivRecords() {
      this.$getHttp("/api/mobile/vehicleOwner/getReceiveRecord", {
        userId: this.userInfo.id,
      }).then((res) => {
        let data = new Date();
        let year = data.getFullYear();

        if (res.giftReceiveRecordList.reminder[year]) {
          this.receivRecordList = this.noRepeat1(
            res.giftReceiveRecordList.reminder[year]
          );
        } else {
          this.receivRecordList = [];
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../node_modules/swiper/css/swiper.css";

.is-merchant-page {
  display: flex;

  .merchant-side {
    width: 180px;
    border-right: 1px solid #dcdcdc;
    padding: 20px 0 0 40px;

    .merchant-side-item {
      margin-bottom: 40px;
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      line-height: 28px;
      cursor: pointer;

      &.active {
        color: #64b6a8;
      }
    }
  }

  .merchant-mian {
    flex: 1;

    /deep/ .el-select {
      width: 120px;
    }

    .merchant-select {
      padding: 20px;
    }

    .merchant1-list {
      padding: 0 20px 40px;

      .merchant1-item {
        height: 80px;
        display: flex;
        margin-bottom: 20px;

        .merchant1-item-left {
          img {
            width: 80px;
            height: 80px;
            object-fit: contain;
          }
        }

        .merchant1-item-right {
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;

          .merchant1-title {
            height: 28px;
            font-size: 20px;
            font-weight: 400;
            color: #333333;
            line-height: 28px;
          }

          .merchant1-info {
            font-size: 18px;
            font-weight: 400;
            color: #666666;
            line-height: 25px;
            display: flex;

            .merchany-info-box {
              width: 174px;
            }
          }
        }
      }
    }

    .merchant1-list1-title {
      height: 28px;
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      line-height: 28px;
      padding-bottom: 10px;
      margin-left: 20px;
      margin-right: 20px;

      border-bottom: 1px solid #dcdcdc;
    }

    .merchant1-list1 {
      padding-left: 20px;
      padding-right: 20px;

      .merchant1-item1 {
        padding: 16px 20px 16px 0;
        border-bottom: 1px solid #dcdcdc;

        font-size: 20px;
        font-weight: 400;
        color: #666666;
        line-height: 28px;

        & > div {
          margin-bottom: 10px;
        }

        & > div:last-child {
          margin-bottom: 0;
        }
      }
    }

    .merchant3-list {
      padding: 10px 20px 40px 20px;

      .merchant3-item {
        padding: 10px 0;
        border-bottom: 1px solid #dcdcdc;

        .merchant3-item-top {
          margin-bottom: 32px;
          font-size: 20px;
          font-weight: 400;
          line-height: 28px;
          color: #333333;
          display: flex;
          justify-content: space-between;
          line-height: 29px;

          .merchant3-item-left {
            span {
              color: #333333;
              margin-right: 16px;
            }

            button {
              border-radius: 2px;
              width: 86px;
              line-height: 29px;
              background-color: transparent;

              &.dangerous {
                color: #e00000;
                border-color: #e00000;
              }

              &.con {
                color: #64b6a8;
                border-color: #64b6a8;
              }

              &.con1 {
                color: #666666;
                border-color: #666666;
              }
            }
          }

          .merchant3-item-right {
            cursor: default;
            font-size: 18px;
            color: #64b6a8;

            span {
              font-size: 24px;
              margin-left: 2px;
              vertical-align: middle;
            }
          }
        }

        .merchant3-item-bottom {
          color: #666666;
          font-size: 18px;
          font-weight: 400;
          line-height: 25px;
        }
      }
    }

    .merchant3-detail {
      position: relative;

      .merchant3-detail-title {
        margin: 20px 20px 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .merchant3-detail-title-left {
          .merchant3-detail-title-name {
            height: 28px;
            font-size: 20px;
            font-weight: 400;
            color: #333333;
            line-height: 28px;
          }

          button {
            border-radius: 2px;
            width: 86px;
            line-height: 29px;
            background-color: transparent;

            &.dangerous {
              color: #e00000;
              border-color: #e00000;
            }

            &.con {
              color: #64b6a8;
              border-color: #64b6a8;
            }

            &.con1 {
              color: #666666;
              border-color: #666666;
            }
          }

          .merchant3-detail-title-status {
            margin-left: 16px;
            width: 86px;
            line-height: 29px;
            border-color: #e00000;
            color: #e00000;
            background-color: transparent;
          }
        }

        .merchant3-detail-title-right {
          font-size: 18px;
          font-weight: 400;
          color: #64b6a8;
          line-height: 25px;
          vertical-align: middle;

          .el-icon-arrow-up {
            // vertical-align: middle;
            font-size: 18px;
          }
        }
      }

      .merchant3-detail-time {
        padding-top: 32px;
        padding-bottom: 10px;
        margin: 0 20px;
        border-bottom: 1px solid #dcdcdc;
        font-size: 18px;
        font-weight: 400;
        color: #666666;
        line-height: 21px;
      }

      .merchant3-list1 {
        padding: 22px 86px;
        text-align: center;
        padding-bottom: 96px;

        .merchant3-head {
          font-weight: 500;
          font-size: 20px;
          font-weight: 500;
          color: #333333;
          line-height: 28px;
          display: flex;
          align-items: center;
          margin-bottom: 14px;

          .merchant3-section {
            flex: 1;
          }
        }

        .merchant3-item1 {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          font-size: 18px;
          font-weight: 400;
          color: #999999;

          .merchant3-section {
            flex: 1;
          }
        }
      }

      .merchant3-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0;

        .page-btn {
          width: 60px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 15px 15px 15px 15px;
          opacity: 1;
          border: 1px solid #64b6a8;
          color: #64b6a8;
        }

        .page-pre {
          font-size: 24px;
          font-weight: 600;
        }

        .page-next {
          font-size: 24px;
          font-weight: 600;
        }

        .page-num {
          color: #666666;
          font-size: 18px;

          margin: 0 20px;
        }
      }

      .merchant3-btn-wrap1 {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: 400;
        color: #666666;
        position: absolute;
        bottom: 54px;
        left: 50%;
        transform: translateX(-50%);

        .merchant3-btn {
          width: 172px;
          line-height: 40px;
          border-color: #64b6a8;
          color: #64b6a8;
          background-color: transparent;
        }
      }
    }

    .merchant2-list {
      padding: 22px 108px;
      height: 536px;
      position: relative;

      .merchant2-btn {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 180px;
        line-height: 40px;
        text-align: center;
        background: #64b6a8;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
      }

      .merchant2-head {
        font-weight: 500;
        font-size: 20px;
        font-weight: 500;
        color: #333333;
        line-height: 28px;
        text-align: center;
        display: flex;
        align-items: center;

        .merchant2-section {
          flex: 1;

          &:nth-child(1) {
          }

          &:nth-child(2) {
          }
        }

        button {
          width: 92px;
          height: 40px;
          line-height: 40px;
        }
      }

      .merchant2-item {
        margin-top: 20px;
        display: flex;
        text-align: center;
        position: relative;

        .box-check {
          position: absolute;
          line-height: 24px;
          top: 50%;
          transform: translateY(-50%);
          left: 5px;

          /deep/ .el-checkbox__inner {
            width: 24px;
            height: 24px;

            &::after {
              width: 6px;
              height: 14px;
              left: 8px;
              top: 2px;
            }
          }
        }

        .merchant2-section {
          flex: 1;
        }
      }

      .merchant2-section {
        position: relative;

        &:nth-child(1) {
        }

        &:nth-child(2) {
        }
      }
    }
  }
}

.be-merchant-page {
  .be-merchant-content {
    .be-merchant-content-mian {
      font-size: 18px;
      font-weight: 400;
      color: #333333;
      line-height: 25px;
      margin-bottom: 20px;
    }

    .be-merchant-content-title {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
      line-height: 25px;
    }
  }
}

.beginMinute {
  width: 116rpx;
  height: 46rpx;
  border-radius: 1px;
  border: 1px solid #333333;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-wrap {
  margin: 0 auto;
  text-align: center;

  img {
    margin-top: 40px;
    margin-bottom: 13px;
    width: 178px;
    height: 178px;
    vertical-align: middle;
  }

  p {
    // width: 230px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #999999;
  }
}

.flex {
  display: flex;
}

.al-center {
  align-items: center;
}

.flex-c {
  flex-direction: column;
}

.ju-bew {
  justify-content: space-between;
}

.ju-center {
  justify-content: center;
}

.pointer {
  cursor: pointer;
}

.box {
  /deep/ .el-dialog__header {
    padding: 0 !important;
  }
}

.rule-title {
  margin: 0 0 26px 0;
  font-size: 22px;
  color: #333333;

  span {
    display: inline-block;
    margin: 0 11px;
    color: #64b6a8;
    font-weight: 600;
  }
}

.bang-club {
  position: relative;
  padding: 20px 0 0 0;
  flex: 4;
  // border: 1px solid #e0e0e0;
  border-radius: 6px 6px 6px 6px;
  color: #333;
  border: 1px solid #e0e0e0;

  .rule {
    border-radius: 19px 19px 19px 19px;
    padding: 5px 12px;
    margin: 0 50px 0 0;
    font-size: 20px;
    font-weight: 400;
    border: 1px solid #64b6a8;
    color: #64b6a8;
  }
}

.button-prev,
.button-next {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  text-align: center;
  font-size: 22px;
  opacity: 0.49;
  color: #fff;
  background-color: #adadad;
  border-radius: 50%;
  transform: translate(-50%);
  z-index: 100;
}

.button-prev {
  left: 20px;
}

.button-next {
  right: 0px;
}

// .swiper-item {
//   width: 390px;
//   margin: 34px 54px;
//   padding: 24px 35px 35px 45px;
//   // background: #FFFFFF;
//   box-shadow: 0px 3px 10px 1px rgba(173, 173, 173, 0.38);
//   border-radius: 10px 10px 10px 10px;
// }
.right-box {
  display: flex;
  // justify-content: center;
  box-sizing: border-box;
  align-items: center;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
  font-size: 17px;
  position: relative;
  width: 60px;
  text-align: left;
  // padding: 0 5px;
  height: 41px;
  border: 2px solid #333333;
  border-radius: 0 8px 8px 0;
  background-color: rgb(219, 52, 52);
  margin-left: 24px;

  span {
    left: 12px;
    position: absolute;
    z-index: 99;
    font-size: 17px !important;
    font-weight: 500;
  }
}

@-moz-document url-prefix() {
  .right-box::before {
    top: -2px !important;
    bottom: -4.5% !important;
  }

  .swiper-slide-prev .right-box::before {
    top: -1px !important;
    bottom: -1% !important;
  }
}

.right-box::before {
  content: "";
  box-sizing: content-box;
  position: absolute;
  top: -2px;
  border: 2px solid var(--bstate);
  border-right: 0;
  bottom: -6.2%;
  z-index: 1;
  right: 70px;
  left: -65px;
  background: var(--state);
  transform: translateX(50px) skewX(-15deg);
  border-radius: 8px 0 0 8px;
}

.swiper-slide-prev .right-box::before {
  // top: -1px !important;
  bottom: -7.4% !important;
}

.item-level {
  position: relative;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 16px 0;

  .img {
    align-items: flex-end;

    img {
      width: 55px;
      height: 55px;
      margin-right: 10px;
    }

    span {
      font-size: 16px;
      font-weight: 100;
    }
  }

  .rank-level {
    position: absolute;
    z-index: 99999999;
    right: 16px;
    top: 50%;
    transform: none;
    transform: translate(0, -50%);
    font-size: 28px;
    font-weight: 500;
    color: #a877c6;
  }

  .cur-level {
    // position: relative;

    .cur-title {
      font-size: 18px;
      font-weight: 400;
      color: #333333;
      line-height: 41px;
    }
  }
}

.level-progress {
  .progress-box {
    // display: flex;
    // align-items: center;
    padding: 0 5px;
    height: 28px;
    background: #f5f5f5;
    border-radius: 25px 25px 25px 25px;
  }

  .level-num {
    margin-top: 9px;
    justify-content: space-between;
    align-items: center;

    & > span:nth-of-type(1) {
      font-size: 16px;
      color: #bd90d9;
    }

    & > span:nth-of-type(2) {
      font-size: 12px;
      color: #848484;
    }
  }
}

.box {
  position: relative;
  padding-bottom: 200px;
}

.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;
  display: flex;

  align-items: flex-start;

  .geren {
    flex: 1;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .list {
      position: relative;
      width: 100%;

      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }

    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.details {
  /deep/ .el-input--suffix .el-input__inner {
    border: none;
    color: #64b6a8;
  }

  /deep/.el-select .el-input .el-select__caret {
    color: #64b6a8;
  }

  /deep/ .el-progress-bar__outer {
    border: 3px solid #ebeef5 !important;
  }

  /deep/ .el-select {
    width: 100px;
  }
}

.swiper-container {
  position: relative;
  width: 820px !important;
  height: 180px !important;
  margin: 0 auto;
}

.swiper-container1 {
  position: relative;
  width: 820px !important;
  height: 110px !important;
  margin-top: 0px;
  margin-bottom: 0px;
  margin: 0 auto 0px;
}

// }
.swiper-wrapper {
  display: flex;
  align-items: center;
}

.swiper-slide {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover !important;

  box-sizing: border-box;
  padding: 14px 23px 21px 27px;
  -webkit-transition: transform 0.1s;
  -moz-transition: transform 0.1s;
  -ms-transition: transform 0.1s;
  -o-transition: transform 0.1s;
  -webkit-transform: scale(0.6, 0.3);
  //  border: 1px solid #999;
  height: 150px;
  width: 388px;
  transform: scale(0.7);
  background: #ffffff;
  box-shadow: 0px 0px 0px 0px rgba(173, 173, 173, 0.38);
  // box-shadow: 0px 3px 10px 1px rgba(173, 173, 173, 0.38);
  border-radius: 10px 10px 10px 10px;
}

.swiper-slide-prev,
.swiper-slide-next {
  .swiper-title {
    color: #e0e0e0 !important;
  }

  .dot {
    position: relative;
    top: 4px;
    margin: 0 0 20px 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

    .small-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #e0e0e0 !important;
    }
  }
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
  position: relative !important;
  width: 388px !important;
  -webkit-transform: scale(1);
  transform: scale(1);
  height: 150px;

  .dot {
    top: 1px;
  }
}

.swiper2 {
  background-color: transparent !important;
  box-shadow: none;
}

.bookImg {
  width: 100px !important;
  height: 150px;
}

.bookName {
  font-size: 14px;
  width: 100%;
  display: none;
  margin-top: -55px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.swiper-slide-active .bookName {
  display: block;
}

.swiper-slide-active .level-num::before {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translate(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent !important;
  border-right: 16px solid transparent !important;
  border-top: 12px solid !important;
}

.swiper-item1 {
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 22px;
  color: #848484;

  .dot {
    position: relative;
    top: 4px;
    margin: 0 0 20px 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

    .small-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #e0e0e0;
    }
  }

  //   .dotStyle {
  //     top: 0px;
  //     width: 34px;
  //     height: 34px;

  //     .smallDotStyle {
  //       width: 22px;
  //       height: 22px;
  //       background-color: #dbc6e8;
  //     }
  //   }
}

.itemStyle {
  font-size: 26px;
  color: #a877c6;
}

.line {
  position: absolute;
  top: 264px;
  left: 62.4px;
  left: 62.4px;
  width: 820px;
  height: 9px;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.05);
}

.cur-right-wrap {
  & > div:last-child {
    border-right: none !important;
  }
}

.userInfo {
  position: relative;
  display: flex;
  align-items: center;

  justify-content: center;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  padding: 12px;

  .mingxi {
    // position: absolute;
    // right: -108px;

    background: #64b6a8;
    border-radius: 19px 19px 19px 19px;
    font-size: 20px;
    padding: 5px 25px;
    margin-left: 32px;
    margin-right: 32px;

    text-align: center;
    color: #ffffff;
  }

  .cur-left,
  .cur-right {
    display: flex;
    // flex: 1;
    align-items: center;
    padding: 0 32px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #dcdcdc;

    .cur-title {
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      line-height: 28px;

      // margin-right: 33px;
    }

    .cur-lev {
      font-size: 32px;
      font-weight: 500;
      color: #64b6a8;
      line-height: 45px;
    }
  }

  // .cur-right {
  //   border: none;
  // }
}

.task-title {
  display: flex;
  align-items: center;
  margin: 20px 0 0 172px;

  .title-left {
    margin: 0 12px 0 0;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
  }

  .title-right {
    font-size: 18px;
    color: #999999;
  }
}

.task-list {
  margin: 0 264px;

  .task-li {
    align-items: center;
    padding: 30px 0 24px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #d6d6d6;
    justify-content: space-between;

    .task-left {
      align-items: center;

      img {
        width: 37px;
        height: 37px;
        margin: 0 14px 0 0;
      }

      .task-desc {
        .task-title {
          width: 220px;
          font-size: 16px;
          color: #333333;
          margin: 0 0 5px 0;
        }

        .task-dot {
          font-size: 14px;
          color: #a3aab0;
        }
      }
    }

    .task-right {
      flex-direction: column;
      align-items: center;

      .task-btn {
        padding: 7px 20px;
        font-size: 14px;
        color: #ffffff;
        background: #64b6a8;
        border-radius: 30px 30px 30px 30px;
      }

      .finish {
        background: #fff;
        border: 1px solid #a3aab0;
        color: #a3aab0;
      }
    }
  }
}

.more-task {
  width: 240px;
  padding-bottom: 45px;
  margin: 50px auto 0;
  font-size: 14px;
  text-align: center;
  color: #8fbab2;
}

.details {
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border: 1px solid #e0e0e0;
  margin: 22px 25px 63px;

  .det-close {
    text-align: right;
    margin: 0 15px 0 0;
    font-weight: 600;
    font-size: 26px;
  }

  .det-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 40px 0;
  }

  .choose-date {
    margin: 0 0 8px 80px;
  }

  .det-list {
    margin: 0 80px 50px;

    .det-month {
      .list-title {
        padding: 5px 20px;
        margin: 13px 0 8px 0;
        background: #64b6a8;
        justify-content: space-between;
        border-radius: 4px 4px 4px 4px;
        font-size: 22px;
        font-weight: 500;
        color: #ffffff;
      }

      .list-content {
        justify-content: space-between;
        padding: 12px 20px;
        font-size: 20px;
        font-weight: 600;
        color: #000000;
      }
    }
  }
}

.det-det::-webkit-scrollbar-track {
  // background: rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

.det-det::-webkit-scrollbar {
  -webkit-appearance: none;
  border-radius: 5px;
  // 滚动条的宽高
  width: 5px;
}

.det-det::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: #64b6a8;
  transition: color 0.2s ease;
}

.det-det {
  padding: 7px 0 0 11px;
  max-height: 250px;
  // height: 250px;
  font-weight: 400;
  overflow-y: auto;
}

.item-container {
  .dd-list {
    padding: 5px 15px;
    background: #f8f8f8;
    margin: 4px 14px 4px 0;

    .dd-left {
      .dd-title {
        font-size: 18px;
        color: #000000;
        margin: 0 0 2px 0;
      }

      .dd-time {
        font-size: 16px;
        color: #adadad;
      }
    }

    .dd-right {
      font-size: 18px;
      color: #000000;
      text-align: right;
    }
  }
}

.popupBox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;

  // z-index: 10000;

  .popupit {
    width: 434px;
    // height: 217px;
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid #707070;

    .title {
      padding: 0 73px;
      margin-top: 18px;
      font-size: 26px;
      color: #000;
    }

    .confirmBtn {
      width: 100%;
      height: 70px;
      background-color: #64b6a8;
      text-align: center;
      line-height: 70px;
      border-radius: 0 0 10px 10px;
      margin-top: 48px;
      cursor: pointer;
    }
  }

  .btn {
    margin-top: 43px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;

    .cancel {
      width: 115px;
      height: 44px;
      border-radius: 37px;
      border: 1px solid #64b6a8;
      font-size: 21px;
      color: #64b6a8;
      text-align: center;
      line-height: 44px;
      margin-left: 87px;
      margin-right: 32px;
      cursor: pointer;
    }

    .affirm {
      width: 115px;
      height: 44px;
      background: #64b6a8;
      border-radius: 37px;
      text-align: center;
      line-height: 44px;
      cursor: pointer;
    }
  }
}

/deep/ table {
  border: 1px solid #ccc !important;
  border: 1px solid #ccc !important;
  border-collapse: collapse !important;
}

/deep/ table td,
/deep/ table th {
  border: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}

/deep/ table th {
  border: 1px solid #ccc;
  text-align: center;
  background-color: #64b6a8;
  color: #fff;
}

.close-repost {
  display: flex;
  justify-content: flex-end;

  span {
    cursor: pointer;
    padding: 10px 20px 0 0;
    color: #333;
    text-align: right;
    font-size: 26px;
    font-weight: 500;
  }
}

.content-right {
  position: relative;

  i {
    position: absolute;
    top: 4px;
    right: 70px;
  }
}

.titLiat {
  white-space: nowrap;
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);

  height: 80px;
  box-sizing: border-box;
  padding-top: 18px;

  .li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 40px;
    color: #333;
    cursor: pointer;
    position: relative;

    &:last-child {
      margin-right: 0;
    }

    &.cur {
      p {
        color: #64b6a8;
        font-size: 32px;
      }
    }

    p {
      font-size: 32px;
      font-weight: 400;
      color: #666666;
    }

    img {
      width: 32px;
      height: 16px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .cur {
    border: 0;
  }
}

.vehicle-title {
  width: 908px;
  height: 58px;
  // background: #fafafa;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  // border: 1px solid #e0e0e0;
  font-weight: 400;
  color: #999999;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;

  .xuan {
    font-weight: 500;
    color: #64b6a8;
    font-size: 20px;
  }

  div {
    cursor: pointer;
  }
}

.demand-gift {
  margin-bottom: 26px;

  .demand-gift-item {
    margin: 0 auto;
    width: 604px;
    height: 86px;
    opacity: 1;
    border-bottom: 1px solid #d6d6d6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;

    &:last-child {
      border-bottom: 0 solid #d6d6d6;
    }

    .demand-gift-info {
      cursor: pointer;
    }
  }
}

.demand-record {
  padding: 40px 228px 24px 228px;

  .demand-record-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 28px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin-bottom: 45px;

    .demand-record-info {
      display: flex;
      align-items: center;

      .demand-record-ico-wrap {
        width: 36px;
        height: 36px;
        background: #ffffff;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid #c4d8d4;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        .demand-record-ico {
          width: 13.5px;
          height: auto;
          vertical-align: middle;
        }
      }

      .demand-record-title {
      }
    }

    .demand-record-status {
      width: 86px;
      height: 34px;
      text-align: center;
      line-height: 34px;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;

      &.declaraed {
        // background: #bfbfbf;
        background: #999999;
      }

      &.available {
        white-space: nowrap;

        background: #64b6a8;
        cursor: pointer;
        color: #ffffff;
      }
    }
  }
}

.vehicle-management {
  padding: 24px 165px 6px 165px;

  .vehicle-management-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;

    .vehicle-management-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .vehicle-management-title {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        margin-bottom: 2px;
      }

      .vehicle-management-time {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
      }
    }

    .vehicle-management-btn {
      width: 93px;
      height: 34px;
      text-align: center;
      line-height: 34px;
      background: #64b6a8;
      color: #ffffff;
      border-radius: 5px 5px 5px 5px;
      opacity: 1;
      cursor: pointer;
    }
  }
}

.bgmask {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(51, 51, 51, 0.52);
  z-index: 999;

  .view-details {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 662px;
    // height: 801px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    overflow: hidden;

    .view-details-close-ico {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 28px;
      height: 28px;
      cursor: pointer;
    }

    .view-details-title {
      font-size: 24px;
      font-weight: 500;
      color: #333333;
      line-height: 33px;
      text-align: center;
      margin: 30px auto;
    }

    .view-details-question {
      position: absolute;
      right: 75px;
      top: 57px;
      line-height: 25px;
      font-size: 18px;
      font-weight: 400;
      color: #64b6a8;
      cursor: pointer;
    }

    .gift-list {
      padding: 0 72px 0 72px;
      max-height: 500px;
      overflow: auto;
      position: relative;

      .gift-item {
        margin-bottom: 30px;

        .gift-title {
          width: 100%;
          height: 42px;
          line-height: 42px;
          background: #64b6a8;
          border-radius: 4px 4px 4px 4px;
          opacity: 1;
          // border: 1px solid #E8E8E8;
          font-size: 16px;
          font-weight: 500;
          color: #f8f8f8;
          display: flex;
          align-items: center;
          position: relative;

          .gift-title-ico {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 40px;
            font-size: 20px;
            transition: all 0.3s;

            &.up {
              transform: translateY(-50%) rotate(-180deg);
            }

            &.down {
              transform: translateY(-50%) rotate(0);
            }
          }
        }

        .gift-details {
          padding: 0 10px;

          .gift-details-item-wrap {
            padding-top: 28px;

            &:first-child {
              padding-top: 20px;
            }
          }

          .gift-details-item {
            width: 100%;
            height: 84px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:last-child {
              margin-bottom: 0;
            }

            &:first-child {
              // margin-top: 20px;
            }

            .gift-details-img {
              width: 120px;
              height: 100%;
              vertical-align: middle;
              border: 0;
            }

            .gift-details-info {
              width: calc(100% - 162px - 44px);
              padding: 0 12px;
              display: flex;
              justify-content: space-between;
              flex-direction: column;
              height: 100%;

              .gift-details-title {
                height: 28px;
                line-height: 28px;
                font-size: 20px;
                font-weight: 500;
                color: #333333;
                margin-bottom: 6px;
              }

              .gift-details-time {
                height: 20px;
                line-height: 20px;
                font-size: 14px;
                font-weight: 400;
                color: #999999;
                margin-bottom: 9px;
              }

              .gift-details-shopName {
                height: 20px;
                line-height: 20px;
                font-size: 14px;
                font-weight: 400;
                color: #64b6a8;
              }
            }

            .gift-details-status {
              width: 78px;
              height: 30px;
              line-height: 30px;
              background: #c7c7c7;
              border-radius: 4px 4px 4px 4px;
              opacity: 1;
              font-size: 15px;
              font-weight: 400;
              color: #ffffff;
              text-align: center;
            }
          }
        }
      }
    }
  }
}

.activity-center {
  margin-bottom: 40px;
  display: flex;
  padding: 0 124px;

  .activity-left {
    width: 234px;
    height: 142px;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .activity-right {
    flex: 1;
    position: relative;
    padding-left: 14px;

    // flex-direction: column;
    // display: flex;
    .activity-status {
      // width: 80px;
      display: inline-block;
      vertical-align: middle;
      height: 32px;
      padding: 0 10px;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      color: #ffffff;
      line-height: 32px;
    }

    .activity-title {
      margin: 10px 0;
      width: 340px;
      height: 28px;
      font-size: 20px;
      font-weight: 500;
      color: #000000;
      line-height: 28px;
    }

    .activity-start-time,
    .activity-end-time {
      height: 28px;
      font-size: 20px;
      font-weight: 400;
      color: #999999;
      line-height: 28px;
    }

    .activity-more {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 132px;
      height: 40px;
      background: #64b6a8;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      color: #ffffff;
      line-height: 40px;
      cursor: pointer;
    }
  }
}

// 活动详情
.new-content {
  .new-title {
    padding-top: 12px;
    padding-left: 40px;
    height: 34px;
    font-size: 24px;
    font-weight: 500;
    color: #333333;
    line-height: 34px;
    margin-bottom: 34px;
  }

  .new-main {
    width: 480px;
    margin: 0 auto;
    position: relative;

    .new-main-img {
      position: absolute;
      height: 206px;
      top: 0;
      left: 0;
    }

    .new-main-top {
      position: relative;
      padding: 1px 35px;

      .new-main-top-title {
        margin-top: 17px;
        text-align: center;
        height: 39px;
        font-size: 28px;
        font-weight: 500;
        color: #ffffff;
        line-height: 39px;
      }

      .new-main-top-progress {
        position: relative;
        margin-top: 20px;
        width: 410px;
        height: 28px;
        background: #fff;
        border-radius: 43px 43px 43px 43px;
        text-align: center;
        overflow: hidden;

        span {
          position: relative;
          font-size: 20px;
          font-weight: 400;
          color: #1c6a74;
        }

        .new-main-top-progress-in {
          position: absolute;
          line-height: 28px;
          border-radius: 43px 43px 43px 43px;
          background: #a4fdf0;
          left: 0;
          top: 0;
          width: 50%;
          height: 100%;
        }
      }

      .new-main-top-desc {
        margin-top: 10px;
        width: 280px;
        height: 28px;
        font-size: 20px;

        font-weight: 400;
        color: #ffffff;
        line-height: 28px;
      }

      .new-main-top-total {
        margin-top: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 28px;
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 28px;
      }
    }

    .new-main-bottom-text {
      margin-top: 18px;
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
    }
  }

  .new-desc {
    margin-top: 20px;
    padding-left: 40px;
    height: 28px;
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    line-height: 28px;
  }

  .present-list {
    display: flex;
    padding: 0 40px;
    flex-wrap: wrap;

    .present-item {
      width: calc((100% - 60px) / 4);
      margin-right: 20px;
      text-align: center;
      margin-bottom: 12px;

      &:nth-child(4n) {
        margin-right: 0;
      }

      .present-item-img {
        width: 100%;
        height: 200px;
        background: #d9d9d9;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
      }

      .present-item-name {
        margin-top: 4px;
        height: 28px;
        font-size: 20px;
        font-weight: 400;
        color: #333333;
        line-height: 28px;
      }

      .present-item-btn {
        display: inline-block;
        vertical-align: middle;
        margin-top: 4px;
        width: 120px;
        height: 40px;
        border-radius: 20px 20px 20px 20px;
        opacity: 1;
        border: 1px solid #eaeaea;
        color: #c4a7a7;
        opacity: 1;
        font-size: 20px;
        font-weight: 400;

        line-height: 40px;

        &.active {
          border: 1px solid #64b6a8;
          background-color: #64b6a8;
          color: #fff;
        }
      }
    }
  }

  .new-p {
    padding: 0 40px;
    word-break: break-all;
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    line-height: 23px;

    & + .new-p {
      margin-top: 20px;
    }
  }
}

.new-content2 {
  padding: 22px 40px 0 40px;

  .new-content2-back {
    color: #64b6a8;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    cursor: pointer;
  }

  .new-content2-main {
    padding: 0 190px;
  }

  .new-btn {
    margin-top: 40px;
    height: 50px;
    background: #64b6a8;
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    line-height: 50px;
    cursor: pointer;
    margin-bottom: 50px;
  }

  .new-desc,
  .new-title {
    margin-top: 12px;
  }
}

.new-form {
  padding: 32px 40px 0 40px;
  position: relative;
  width: 480px;
  margin: 0 auto;

  .new-content2-back {
    color: #64b6a8;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 10px;
    position: absolute;
    left: -172px;
  }

  .new-desc {
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    line-height: 28px;
  }

  .new-title {
    user-select: none;
    margin-top: 30px;
    margin-bottom: 24px;
    height: 34px;
    font-size: 24px;
    font-weight: 500;
    color: #333333;
    line-height: 34px;

    &.active {
      color: #64b6a8;
    }
  }

  .new-qrcode {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 322px;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #dcdcdc;

    .new-qrcode-title {
      text-align: center;
      margin: 30px auto 20px;
      height: 34px;
      font-size: 24px;
      font-weight: 400;
      color: #333333;
      line-height: 34px;
    }

    .new-qrcode-content {
      text-align: center;
      padding: 0 45px;
      display: flex;
      justify-content: space-between;

      .new-qrcode-item {
        .new-qrcode-img {
          width: 180px;
          height: 180px;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          object-fit: cover;
        }

        .new-qrcode-text {
          height: 28px;
          font-size: 20px;
          font-weight: 400;
          color: #999999;
          line-height: 28px;
        }
      }
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin-bottom: 36px;
}

/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #64b6a8;
}
.animal-scale {
  animation: 0.75s scale2 0s infinite;
  transform: translate(0, -2px);
  border-radius: 50%;
  box-shadow: 0px 6px 0px #bf2310, 0px 4px 8px rgba(0, 0, 0, 0.2);
}

@keyframes scale2 {
  0% {
    transform: translate(0, -2px);
    box-shadow: 0px 6px 0px #bf2310, 0px 4px 8px rgba(0, 0, 0, 0.2);
  }

  2% {
    transform: translate(0, 2px);
    box-shadow: 0px 2px 0px #bf2310, 0px 1px 8px rgba(0, 0, 0, 0.1);
  }

  50% {
    transform: translate(0, 2px);
    box-shadow: 0px 2px 0px #bf2310, 0px 1px 8px rgba(0, 0, 0, 0.1);
  }

  52% {
    transform: translate(0, -2px);
    box-shadow: 0px 6px 0px #bf2310, 0px 4px 8px rgba(0, 0, 0, 0.2);
  }

  100% {
    transform: translate(0, -2px);
    box-shadow: 0px 6px 0px #bf2310, 0px 4px 8px rgba(0, 0, 0, 0.2);
  }
}
</style>